/* ============================================================
   Shopia pricing — free-demo banner + 4 plans in one row
   ============================================================ */
:root{
  --pz-indigo:#4f46e5; --pz-blue:#2563eb; --pz-sky:#0ea5e9; --pz-emerald:#10b981;
  --pz-ink:#0f172a; --pz-body:#475569; --pz-muted:#94a3b8; --pz-line:#e6e8f0;
  --pz-paper:#fff; --pz-soft:#f6f8fc;
  --pz-grad:linear-gradient(135deg,#4f46e5,#2563eb 55%,#0ea5e9);
}
[data-theme="dark"]{--pz-ink:#e8edf6;--pz-body:#aeb8c9;--pz-muted:#7b869a;--pz-line:#25304a;--pz-paper:#0f1728;--pz-soft:#0b1220}

.pz-section{position:relative;background:
  radial-gradient(circle at 8% 18%,rgba(79,70,229,.08),transparent 26%),
  radial-gradient(circle at 92% 34%,rgba(14,165,233,.09),transparent 28%),var(--pz-soft);border-top:1px solid var(--pz-line)}
.pz-section>.container{position:relative}

/* ---- Free demo banner ---- */
.pz-demo{position:relative;overflow:hidden;border-radius:24px;background:var(--pz-grad);color:#fff;
  padding:38px 42px;margin-bottom:38px;border:1px solid rgba(255,255,255,.2);box-shadow:0 30px 70px -30px rgba(37,99,235,.55)}
.pz-demo-glow{position:absolute;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.18);
  filter:blur(60px);top:-140px;right:-60px;animation:pzFloat 12s ease-in-out infinite}
@keyframes pzFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,26px)}}
.pz-demo-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.pz-demo-txt{flex:1;min-width:280px}
.pz-demo-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.2);
  padding:7px 15px;border-radius:100px;font-size:13px;font-weight:700;margin-bottom:14px;backdrop-filter:blur(6px)}
.pz-demo-txt h2{font-family:Poppins,sans-serif;font-size:clamp(26px,3.4vw,36px);font-weight:800;margin:0 0 10px;line-height:1.1}
.pz-demo-txt>p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.92);margin:0 0 16px;max-width:520px}
.pz-demo-feats{list-style:none;display:flex;gap:20px;flex-wrap:wrap;margin:0;padding:0}
.pz-demo-feats li{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500}
.pz-demo-feats i{color:#6ee7b7}
.pz-demo-cta{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.pz-btn-white{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--pz-blue);
  padding:16px 30px;border-radius:14px;font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.4);transition:.2s}
.pz-btn-white:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 22px 44px -16px rgba(0,0,0,.5)}
.pz-demo-sub{font-size:12.5px;color:rgba(255,255,255,.85)}

/* ---- 4 plans, ONE row ---- */
.cycle-toggle{width:max-content;margin:0 auto 8px;padding:5px;background:linear-gradient(135deg,#e8eefb,#e2e8f0);border:1px solid #d8e1ef;border-radius:16px;box-shadow:0 18px 38px -28px rgba(15,23,42,.55)}
.cycle-toggle button{min-width:126px;border:0;background:transparent;color:#475569;border-radius:11px;padding:12px 24px;font:750 14px Poppins,sans-serif;cursor:pointer;transition:.2s}
.cycle-toggle button.on{background:linear-gradient(135deg,#fff,#f8fbff);color:var(--pz-blue);box-shadow:0 9px 22px -12px rgba(15,23,42,.55),inset 0 0 0 1px rgba(255,255,255,.85)}
.save-note{min-height:28px;text-align:center;color:var(--pz-emerald);font-size:13px;font-weight:700;margin-bottom:20px}

.pz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.pz-plan{--tone:#4f46e5;--tone2:#7c3aed;--tone-soft:#f3f1ff;position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,var(--tone-soft) 0,rgba(255,255,255,.98) 34%,var(--pz-paper) 100%);
  border:1px solid color-mix(in srgb,var(--tone) 22%,var(--pz-line));border-radius:23px;
  padding:28px 24px 27px;display:flex;flex-direction:column;transition:.3s cubic-bezier(.16,.8,.3,1);
  box-shadow:0 20px 50px -40px color-mix(in srgb,var(--tone) 70%,#0f172a);animation:pzUp .5s both}
.pz-tone-1{--tone:#7c3aed;--tone2:#a855f7;--tone-soft:#f6f1ff}
.pz-tone-2{--tone:#2563eb;--tone2:#0ea5e9;--tone-soft:#eef6ff}
.pz-tone-3{--tone:#0891b2;--tone2:#14b8a6;--tone-soft:#ecfeff}
.pz-tone-4{--tone:#059669;--tone2:#22c55e;--tone-soft:#ecfdf5}
.pz-plan::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--tone),var(--tone2));transition:.25s}
.pz-orb{position:absolute;z-index:-1;width:150px;height:150px;right:-60px;top:-62px;border-radius:50%;background:color-mix(in srgb,var(--tone) 13%,transparent);filter:blur(1px)}
@keyframes pzUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.pz-plan:hover{transform:translateY(-9px);box-shadow:0 34px 66px -28px color-mix(in srgb,var(--tone) 55%,#0f172a);border-color:color-mix(in srgb,var(--tone) 48%,var(--pz-line))}
.pz-plan.pop{border:2px solid var(--tone);transform:translateY(-7px);box-shadow:0 34px 70px -30px color-mix(in srgb,var(--tone) 68%,#0f172a)}
.pz-plan.pop:hover{transform:translateY(-12px)}
.pz-tag{position:absolute;z-index:3;top:12px;right:14px;background:linear-gradient(135deg,var(--tone),var(--tone2));color:#fff;
  padding:5px 16px;border-radius:100px;font-size:11.5px;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;box-shadow:0 8px 20px -6px rgba(37,99,235,.5)}
.pz-plan-head{position:relative;z-index:2;display:flex;align-items:center;gap:11px;margin-bottom:17px;min-height:45px}
.pz-plan-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,var(--tone),var(--tone2));color:#fff;font-size:16px;box-shadow:0 12px 24px -14px var(--tone)}
.pz-plan-name{font-family:Poppins,sans-serif;font-size:20px;font-weight:800;color:var(--pz-ink)}
.pz-price{display:flex;align-items:baseline;justify-content:flex-start;gap:0;margin-bottom:18px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;padding:14px 12px;border:1px solid color-mix(in srgb,var(--tone) 14%,var(--pz-line));border-radius:15px;background:color-mix(in srgb,var(--pz-paper) 86%,var(--tone-soft));box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
/* Price + period are ONE unbroken line: "TSh 5,000/Month". They used to be
   two independently-sized flex items on a nowrap row, so on a narrow card
   the amount simply overflowed its box and printed straight through the
   period text. Sizes are now capped in px (no vw term that can outgrow the
   card), the row clips instead of overlapping, and the period sits tight
   against the amount with no gap. */
.pz-amt{flex:0 0 auto;white-space:nowrap;font-family:Poppins,sans-serif;font-size:clamp(19px,2.05vw,25px);font-weight:850;color:var(--tone);line-height:1.05;letter-spacing:-.6px}
.pz-per{flex:0 0 auto;white-space:nowrap;font-size:clamp(11px,.95vw,14px);color:#0f172a;font-weight:700;line-height:1.05;margin-left:1px}
.pz-cta{display:block;text-align:center;padding:14px;border-radius:13px;border:0;
  background:linear-gradient(135deg,var(--tone),var(--tone2));color:#fff;font-weight:750;font-size:14.5px;text-decoration:none;transition:.18s;margin-bottom:18px;box-shadow:0 14px 28px -16px var(--tone)}
.pz-cta:hover{color:#fff;transform:translateY(-2px);box-shadow:0 19px 32px -16px var(--tone)}
.pz-cta-primary{background:linear-gradient(135deg,var(--tone),var(--tone2));color:#fff;border-color:transparent;box-shadow:0 16px 30px -12px rgba(37,99,235,.62)}
.pz-cta-primary:hover{color:#fff;transform:translateY(-2px)}
.pz-feats{list-style:none;margin:0;padding:4px 0 0;display:grid;gap:0}
.pz-feats li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--pz-body);padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--pz-line) 75%,transparent)}
.pz-feats li:last-child{border-bottom:0}
.pz-feats i{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--tone) 11%,transparent);color:var(--tone);font-size:10px;flex:0 0 auto}
.pz-feats b{color:var(--pz-ink)}
/* A small heading inside the feature list. Not a list row: no tick, no
   border, so the eye reads it as a label for the rows beneath rather than
   as another thing you get. */
.pz-feats li.pz-feat-group{display:block;border-bottom:0;padding:14px 0 4px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--pz-muted)}
.pz-feats li.pz-feat-group:first-child{padding-top:6px}
/* What this plan does NOT include. Shown, not hidden — a price table that
   only lists the good news is an advertisement, and the person finds out
   the truth after they have paid. Dimmed so it never competes with the
   included rows for attention. */
.pz-feats li.pz-feat-off{color:var(--pz-muted);opacity:.72}
.pz-feats li.pz-feat-off i{background:color-mix(in srgb,var(--pz-muted) 13%,transparent);color:var(--pz-muted)}

/* ---- Reassurance strip ---- */
.pz-assure{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.pz-assure-item{display:flex;align-items:center;gap:13px;padding:18px;background:var(--pz-paper);border:1px solid var(--pz-line);border-radius:15px;box-shadow:0 16px 34px -30px rgba(15,23,42,.4);transition:.2s}
.pz-assure-item:hover{transform:translateY(-3px);border-color:#bfdbfe}
.pz-assure-ic{width:44px;height:44px;flex:0 0 44px;border-radius:12px;display:grid;place-items:center;font-size:18px}
.pz-assure-item b{display:block;font-size:14.5px;color:var(--pz-ink);font-family:Poppins,sans-serif}
.pz-assure-item small{color:var(--pz-muted);font-size:12.5px}

/* ---- FAQ CTA ---- */
.pz-faq-cta{text-align:center;margin-top:46px}
.pz-faq-cta p{font-size:18px;font-weight:600;color:var(--pz-ink);margin:0 0 16px;font-family:Poppins,sans-serif}
.pz-faq-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---- responsive ---- */
@media(max-width:1000px){
  .pz-grid{grid-template-columns:repeat(2,1fr)}
  .pz-assure{grid-template-columns:repeat(2,1fr)}
  .pz-amt{font-size:25px}
  .pz-per{font-size:14px}
}
@media(max-width:600px){
  .pz-grid{grid-template-columns:1fr}
  .pz-assure{grid-template-columns:1fr}
  .pz-demo{padding:26px 22px}
  .pz-demo-cta{width:100%}
  .pz-btn-white{width:100%;justify-content:center}
  .cycle-toggle{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .cycle-toggle button{min-width:0;padding-inline:12px}
  .pz-plan{padding:28px 22px 24px}
  .pz-amt{font-size:clamp(22px,7vw,28px)}
  .pz-per{font-size:14px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}