/* ═══════════════════════════════════════════════════════════════════════════
   pf-plans.css — the paywall, the offer, and the ad rails.    added 2026-10-02

   Same cream-and-navy as the rest of /portfolio/. The one rule that is not
   decoration: an ad never appears inside the paywall. Asking somebody for ₹49
   and selling their attention on the same screen is how a page stops being
   believed.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the offer strip ─────────────────────────────────────────────────────── */
.pp-wall{
  background:var(--pf-card); border:1px solid var(--pf-line); border-radius:18px;
  padding:0 0 26px; margin:22px 0; box-shadow:var(--pf-sh); overflow:hidden;
}
.pp-offer{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:12px 26px; background:linear-gradient(100deg,var(--pf-navy),var(--pf-navy2));
  color:#fff; font-size:12px;
}
.pp-flash{
  display:inline-block; padding:4px 11px; border-radius:20px; font-weight:700;
  font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  background:var(--pf-gold-l); color:#13213a;
}
.pp-timer{font-variant-numeric:tabular-nums; color:#d9c89c}
.pp-timer b{color:#fff; font-size:14px; letter-spacing:.04em}

.pp-head{padding:24px 26px 4px}
.pp-head h3{margin:0 0 8px; font-size:23px; letter-spacing:-.5px; color:var(--pf-navy); font-weight:650}
.pp-head p{margin:0; max-width:76ch; font-size:12.5px; line-height:1.8; color:var(--pf-mut)}

/* ── the four cards ──────────────────────────────────────────────────────── */
.pp-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:13px; padding:20px 26px 0}
.pp-card{
  position:relative; display:flex; flex-direction:column; gap:9px;
  padding:19px 18px 18px; border-radius:15px;
  background:#fbf8f0; border:1px solid var(--pf-line);
  transition:transform .18s var(--pf-ease), box-shadow .18s ease, border-color .18s ease;
}
.pp-card:hover{transform:translateY(-2px); box-shadow:var(--pf-sh); border-color:var(--pf-line2)}
.pp-card.best{border-color:var(--pf-gold); background:#fdf8ec; box-shadow:0 0 0 1px var(--pf-gold) inset}
.pp-card.owned{background:#eef7f3; border-color:#9ecdbd}
.pp-ribbon{
  position:absolute; top:-9px; left:18px; padding:3px 10px; border-radius:20px;
  background:var(--pf-gold); color:#2a1f05; font-size:9px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.pp-card h4{margin:0; font-size:15px; font-weight:650; color:var(--pf-navy)}
.pp-card header p{margin:3px 0 0; font-size:11px; color:var(--pf-mut)}
.pp-price{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.pp-mrp{color:#9b937f; text-decoration:line-through; font-size:13px; font-variant-numeric:tabular-nums}
.pp-price strong{font-size:31px; font-weight:650; letter-spacing:-1.3px; color:var(--pf-navy); font-variant-numeric:tabular-nums}
.pp-off{
  padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700;
  background:#ddf5ee; color:var(--pf-up);
}
.pp-line{margin:0; font-size:11.5px; line-height:1.7; color:var(--pf-mut); flex:1}
.pp-per{margin:0; font-size:10px; color:#9b937f; letter-spacing:.02em}
.pp-have{
  display:block; text-align:center; padding:11px; border-radius:10px;
  background:#ddf5ee; color:var(--pf-up); font-size:12px; font-weight:600;
}
.pp-buy{
  display:block; width:100%; padding:11px 14px; border:0; border-radius:10px; cursor:pointer;
  background:linear-gradient(135deg,var(--pf-gold-l),var(--pf-gold));
  color:#1d1704; font:inherit; font-size:12.5px; font-weight:650;
  transition:transform .16s var(--pf-ease), filter .16s ease;
}
.pp-buy:hover{filter:brightness(1.06)}
.pp-buy:active{transform:scale(.97)}
.pp-buy[disabled]{opacity:.65; cursor:default; transform:none}
.pp-buy.sm{width:auto; padding:8px 14px; font-size:11.5px}

/* ── the matrix ──────────────────────────────────────────────────────────── */
.pp-mt{margin:30px 26px 4px; font-size:16px; color:var(--pf-navy); font-weight:650}
.pp-sub{margin:0 26px 14px; font-size:11.5px; color:var(--pf-mut)}
.pp-matrix-wrap{overflow:auto; margin:0 26px; border:1px solid var(--pf-line); border-radius:13px}
.pp-matrix{width:100%; border-collapse:collapse; font-size:12px; min-width:680px}
.pp-matrix th{
  position:sticky; top:0; z-index:1; background:#f3ece0; color:var(--pf-navy);
  text-align:left; padding:11px 14px; font-weight:650;
}
.pp-matrix th.c, .pp-matrix td.c{text-align:center; width:106px}
.pp-matrix th.c span{display:block; font-size:11px}
.pp-matrix th.c b{display:block; font-size:13px; color:var(--pf-gold-d); font-variant-numeric:tabular-nums}
.pp-matrix td{padding:11px 14px; border-top:1px solid #f0ebe0; color:var(--pf-ink)}
.pp-matrix td span{display:block}
.pp-matrix td small{display:block; margin-top:3px; font-size:10px; color:var(--pf-mut); line-height:1.55}
.pp-matrix tbody tr:hover td{background:#fbf8f0}
.pp-group th{
  background:var(--pf-navy)!important; color:#fff!important; position:static;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:9px 14px!important;
}
.pp-yes{font-style:normal; color:var(--pf-up); font-weight:700; font-size:15px}
.pp-no{font-style:normal; color:#c3baa6}
.pp-free{font-style:normal; font-size:10px; font-weight:700; color:var(--pf-gold-d)}
.pp-fine{margin:16px 26px 0; font-size:10.5px; line-height:1.8; color:#9b937f; max-width:92ch}

/* ── a locked section in the dashboard ───────────────────────────────────── */
.pp-locked{
  position:relative; background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.97)),
    repeating-linear-gradient(135deg,#f3ece0 0 12px,#fbf8f0 12px 24px);
  border-style:dashed;
}
.pp-lock-in{max-width:560px; margin:0 auto; text-align:center; padding:12px 0 6px}
.pp-lockicon{width:30px; height:30px; fill:none; stroke:var(--pf-gold-d); stroke-width:1.7; stroke-linecap:round}
.pp-lock-in h3{margin:10px 0 12px; font-size:19px; color:var(--pf-navy); font-weight:650; letter-spacing:-.3px}
.pp-lock-in ul{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:7px; text-align:left}
.pp-lock-in li{
  padding-left:22px; position:relative; font-size:12px; line-height:1.65; color:var(--pf-mut);
}
.pp-lock-in li::before{
  content:'✓'; position:absolute; left:3px; top:0; color:var(--pf-gold-d); font-weight:700;
}
.pp-lock-buy{display:flex; align-items:baseline; justify-content:center; gap:9px; margin-bottom:12px}
.pp-lock-in .pp-buy{max-width:280px; margin:0 auto}
.pp-lock-in small{display:block; margin-top:9px; font-size:10.5px; color:var(--pf-mut)}
.pp-lock-in small b{font-variant-numeric:tabular-nums; color:var(--pf-navy)}

/* ── the banner ──────────────────────────────────────────────────────────── */
.pp-banner{
  position:relative; margin:18px 0; padding:18px 44px 16px 20px; border-radius:15px;
  background:linear-gradient(115deg,var(--pf-navy) 0%,var(--pf-navy2) 70%,#243459 100%);
  color:#fff; box-shadow:var(--pf-sh);
  transition:opacity .18s ease, transform .18s var(--pf-ease);
}
.pp-banner strong{display:block; margin:8px 0 5px; font-size:17px; letter-spacing:-.3px}
.pp-banner p{margin:0; font-size:12px; line-height:1.7; color:#c4cde0; max-width:62ch}
.pp-banner p s{color:#8d9ab4}
.pp-banner p b{color:var(--pf-gold-l); font-size:14px}
.pp-banner-foot{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px}
.pp-banner-foot span{font-size:11px; color:#c4cde0}
.pp-banner-foot b{color:#fff; font-variant-numeric:tabular-nums}
.pp-x{
  position:absolute; top:10px; right:10px; width:28px; height:28px; border:0; cursor:pointer;
  border-radius:8px; background:rgba(255,255,255,.12); color:#fff; font-size:17px; line-height:1;
}
.pp-x:hover{background:rgba(255,255,255,.2)}

/* ── toast ───────────────────────────────────────────────────────────────── */
.pp-toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:9999;
  max-width:min(460px,calc(100vw - 32px)); padding:14px 18px; border-radius:13px;
  background:var(--pf-navy); color:#fff; box-shadow:0 10px 36px rgba(13,21,38,.35);
  transition:opacity .25s ease;
}
.pp-toast strong{display:block; font-size:13px; margin-bottom:3px}
.pp-toast span{display:block; font-size:11.5px; line-height:1.65; color:#c4cde0}

/* ── advertising ─────────────────────────────────────────────────────────────
   Every slot reserves its height before anything loads, so the page does not
   jump under the reader's thumb the day the account is connected. --ad-h is
   set per slot by adSlot().
   An ad never appears inside .pp-wall; that is enforced in the markup, and the
   rule below is the second line of defence. */
.pp-wall .pp-ad{display:none!important}

.pp-ad{
  position:relative; display:block; margin:20px auto;
  min-height:var(--ad-h,250px);
  border:1px dashed var(--pf-line2); border-radius:12px; background:#fbf8f0;
  overflow:hidden;
}
.pp-ad.is-empty{display:grid; place-items:center}
.pp-ad-ph{font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#b7ad96}
.pp-ad-lbl{
  position:absolute; top:6px; left:10px; z-index:1;
  font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:#b7ad96;
}
.pp-ad.is-empty .pp-ad-lbl{display:none}
.pp-ad ins{display:block; width:100%}

.pp-ad-leaderboard{max-width:970px}
.pp-ad-inline{max-width:728px}
.pp-ad-infeed{max-width:620px}

/* ── the gutters ─────────────────────────────────────────────────────────────
   The content column is 1240px. A 300px rail needs 300 + a 24px gap on each
   side, so the rails only exist once the window can hold 1240 + 2*(300+24) =
   1888px. Below that there is no gutter to use and the content is never
   squeezed to invent one. */
.pp-rail{display:none}
@media (min-width:1888px){
  .pp-rail{
    display:block; position:fixed; top:92px; width:300px; z-index:2;
  }
  .pp-rail.left  { left:calc(50% - 620px - 324px) }
  .pp-rail.right { right:calc(50% - 620px - 324px) }
  .pp-rail .pp-ad{margin:0; min-height:600px}
}
/* A narrower rail where there is room for one but not for 300px. */
@media (min-width:1608px) and (max-width:1887px){
  .pp-rail{display:block; position:fixed; top:92px; width:160px; z-index:2}
  .pp-rail.left  { left:calc(50% - 620px - 184px) }
  .pp-rail.right { right:calc(50% - 620px - 184px) }
  .pp-rail .pp-ad{margin:0; min-height:600px}
}

/* ── the sticky strip on phones ──────────────────────────────────────────────
   Bottom of the screen, above the home indicator, and it leaves room for itself
   so it never covers the last line of the page. */
.pp-anchor{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
  background:rgba(251,248,240,.96); backdrop-filter:blur(8px);
  border-top:1px solid var(--pf-line);
}
.pp-anchor .pp-ad{margin:0; min-height:50px; width:100%; max-width:468px; border-style:solid}
.pp-anchor .pp-x{
  position:absolute; top:-12px; right:8px; width:24px; height:24px; font-size:14px;
  background:var(--pf-navy); color:#fff; border-radius:50%; border:0; cursor:pointer; line-height:1;
}
@media (min-width:900px){ .pp-anchor{display:none} }
body:has(.pp-anchor){padding-bottom:64px}

@media (prefers-reduced-transparency:reduce){
  .pp-anchor{background:#fbf8f0; backdrop-filter:none}
}

/* ── narrow screens ──────────────────────────────────────────────────────── */
@media (max-width:1100px){ .pp-cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){
  .pp-cards{grid-template-columns:1fr; padding:16px 16px 0}
  .pp-head{padding:18px 16px 2px}
  .pp-head h3{font-size:19px}
  .pp-offer{padding:10px 16px}
  .pp-matrix-wrap, .pp-mt, .pp-sub, .pp-fine{margin-left:16px; margin-right:16px}
  .pp-banner{padding:16px 40px 14px 16px}
  .pp-banner strong{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .pp-card, .pp-buy, .pp-banner{transition:none}
  .pp-card:hover{transform:none}
}

/* ── See plans ───────────────────────────────────────────────────────────── */
.pp-seeplans{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:8px 13px; border-radius:10px; font:inherit; font-size:12px; font-weight:600;
  background:#fbf8f0; border:1px solid var(--pf-line2); color:var(--pf-navy);
  transition:transform .16s var(--pf-ease), background .16s ease;
}
.pp-seeplans svg{width:14px; height:14px; stroke-linecap:round}
.pp-seeplans:hover{background:#f3ece0}
.pp-seeplans:active{transform:scale(.97)}

.pp-modal{
  position:fixed; inset:0; z-index:200; overflow:auto;
  background:rgba(7,23,45,.62); backdrop-filter:blur(3px);
  padding:28px 16px;
}
.pp-modal-in{
  position:relative; max-width:1120px; margin:0 auto;
  background:var(--pf-card); border-radius:18px; box-shadow:0 24px 70px rgba(7,23,45,.4);
}
.pp-modal-in .pp-wall{margin:0; box-shadow:none; border:0}
.pp-modal .pp-x{position:absolute; top:12px; right:12px; z-index:2; background:rgba(255,255,255,.16)}
.pp-onnow{
  margin:0; padding:14px 26px 0; font-size:12.5px; color:var(--pf-mut);
}
.pp-onnow b{color:var(--pf-navy)}
@media (prefers-reduced-motion:reduce){ .pp-seeplans{transition:none} }
@media (prefers-reduced-transparency:reduce){ .pp-modal{backdrop-filter:none; background:rgba(7,23,45,.9)} }