/* ==========================================================================
   Pricing — ReFrame brand. Responsive flex layout (was an absolute SVG-restored
   stage; rebuilt as flow so it scales, aligns, and the check icons render).
   Namespaced `pp-`. Poppins, brand pink→purple.
   ========================================================================== */
.pp-root{
  --pp-pink:   #EF0385;
  --pp-purple: #6E24B2;
  --pp-grad:   linear-gradient(90deg,#EF0385 0%,#6E24B2 100%);
  --pp-soft:   rgba(239,3,133,.10);
  --pp-ink:    #161616;
  --pp-ink-2:  #4a4550;
  --pp-muted:  #7a7580;
  --pp-line:   #ece8ee;
  --pp-dollar: #b39aa8;
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--pp-ink);
  direction:ltr;
  padding:72px 24px;
  -webkit-font-smoothing:antialiased;
}
.pp-root *{box-sizing:border-box;margin:0;padding:0}

/* ------------------------------ heading ------------------------------ */
.pp-head{max-width:640px;margin:0 auto 44px;text-align:center}
.pp-tag{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;background:var(--pp-soft);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--pp-pink)}
.pp-h2{margin-top:16px;font-size:32px;line-height:1.15;font-weight:700;color:var(--pp-ink)}
.pp-h2 .pp-grad{background:linear-gradient(100deg,#EF0385 0%,#B516A0 55%,#6E24B2 115%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pp-sub{margin-top:12px;font-size:15px;line-height:1.55;font-weight:400;color:var(--pp-muted)}

/* -------------------------------- grid -------------------------------- */
.pp-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;max-width:930px;margin:0 auto;align-items:stretch;
}

/* -------------------------------- card -------------------------------- */
.pp-card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--pp-line);border-radius:20px;
  padding:30px 28px;
  box-shadow:0 1px 2px rgba(22,22,22,.04),0 18px 40px rgba(22,22,22,.06);
}
.pp-card--mid{
  border-color:transparent;
  box-shadow:0 0 0 2px var(--pp-pink),0 18px 44px rgba(239,3,133,.18);
  transform:translateY(-8px);
}

.pp-ribbon{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;height:28px;padding:0 16px;border-radius:999px;
  background:var(--pp-grad);color:#fff;font-size:12px;font-weight:600;letter-spacing:.03em;
  box-shadow:0 6px 16px rgba(239,3,133,.32);white-space:nowrap;
}

.pp-pill{align-self:flex-start;display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;background:var(--pp-soft);font-size:12px;font-weight:600;color:var(--pp-pink);white-space:nowrap}

.pp-price{display:flex;align-items:baseline;gap:2px;margin-top:16px}
.pp-cur{font-size:20px;font-weight:600;color:var(--pp-dollar)}
.pp-num{font-size:38px;font-weight:700;line-height:1;color:var(--pp-ink)}
.pp-per{font-size:14px;font-weight:500;color:var(--pp-muted);margin-left:3px}

.pp-desc{margin-top:12px;font-size:14px;line-height:1.5;font-weight:400;color:var(--pp-ink-2);min-height:42px}

/* ------------------------------- button ------------------------------- */
.pp-buy{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:22px;height:50px;border:0;border-radius:26px;text-decoration:none;
  background:
    radial-gradient(160px 30px at 50% 50%, rgba(255,255,255,.16), rgba(255,255,255,0)),
    var(--pp-grad);
  box-shadow:0 12px 24px -6px rgba(239,3,133,.42),0 2px 6px rgba(239,3,133,.24),
             inset 1px 1px 2px rgba(255,255,255,.24);
  cursor:pointer;transition:transform .16s ease,box-shadow .16s ease;
}
.pp-buy:hover{transform:translateY(-1px);box-shadow:0 16px 28px -6px rgba(239,3,133,.5),0 2px 6px rgba(239,3,133,.24),inset 1px 1px 2px rgba(255,255,255,.24)}
.pp-buy:active{transform:translateY(0)}
.pp-buy--ghost{
  background:#fff;border:1.5px solid var(--pp-pink);
  box-shadow:0 6px 16px -6px rgba(239,3,133,.24);
}
.pp-buy--ghost .pp-buy-txt{color:var(--pp-pink)}
/* Unavailable plan (not purchasable yet): dimmed card, inert grey button, muted ribbon. */
.pp-card--soon{opacity:.75}
.pp-card--soon.pp-card--mid{box-shadow:0 0 0 2px #c9c2d1,0 18px 44px rgba(22,22,22,.10);transform:none}
.pp-ribbon--soon{background:#8a8494;box-shadow:0 6px 16px rgba(22,22,22,.18)}
.pp-buy--soon{background:#b9b3c1;box-shadow:none;cursor:default;pointer-events:none}
.pp-buy--soon:hover{transform:none;box-shadow:none}
.pp-fire{width:15px;height:18px;flex:none}
.pp-buy-txt{font-size:15px;font-weight:600;color:#fff;line-height:1}

/* ------------------------------ features ------------------------------ */
.pp-feats{list-style:none;margin-top:24px;padding-top:22px;border-top:1px solid var(--pp-line);display:flex;flex-direction:column;gap:13px}
.pp-feat{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:400;color:var(--pp-ink-2)}
.pp-check{flex:none;width:20px;height:20px}
.pp-feat-txt{line-height:1.35}

/* ------------------------------ responsive ------------------------------ */
@media (max-width:900px){
  .pp-grid{grid-template-columns:1fr;max-width:420px;gap:20px}
  .pp-card--mid{transform:none}
  .pp-h2{font-size:28px}
}
@media (prefers-reduced-motion:reduce){.pp-root *{transition:none!important}}