/* ============================================
   WritingNepal — Paid Writing (Pay-Per-Post) info page styles
   Extends style.css tokens.
   ============================================ */

.pw-hero{ padding:44px 0 8px; text-align:center; }
.pw-hero .eyebrow{ justify-content:center; align-items:center; }
.pw-hero h1{ font-size:2.2rem; max-width:20ch; margin:0 auto 14px; }
.pw-hero p{ color:var(--ink-soft); max-width:58ch; margin:0 auto; font-size:1.05rem; }
.pw-hero-actions{ display:flex; justify-content:center; gap:12px; margin-top:26px; flex-wrap:wrap; }

/* ---- steps ---- */
.pw-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:52px 0; }
.pw-step{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px; text-align:center; }
.pw-step .num{
  width:36px; height:36px; border-radius:50%; background:var(--ink); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:800;
  margin:0 auto 14px;
}
.pw-step h4{ font-size:1.05rem; margin-bottom:8px; }
.pw-step p{ font-size:.88rem; color:var(--ink-soft); }

/* ---- PPS vs subscription comparison ---- */
.pw-compare{ margin:56px 0; }
.pw-compare-head{ text-align:center; margin-bottom:28px; }
.pw-compare-head h2{ font-size:1.6rem; }
.pw-compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.compare-card{ border-radius:var(--radius-lg); padding:26px; }
.compare-card.pps{
  background:var(--white); border:2px solid var(--ink); box-shadow:5px 5px 0 var(--gold);
}
.compare-card.sub{ background:var(--paper-deep); border:1px solid var(--line); }
.compare-card h4{ font-size:1.1rem; margin-bottom:4px; }
.compare-card .tag{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--leaf-deep); margin-bottom:14px; display:block; }
.compare-card.sub .tag{ color:var(--ink-soft); }
.compare-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.compare-card li{ font-size:.9rem; display:flex; align-items:flex-start; gap:8px; }
.compare-card.pps li::before{ content:'✓'; color:var(--leaf-deep); font-weight:800; }
.compare-card.sub li::before{ content:'✕'; color:var(--rose-deep); font-weight:800; }

/* ---- pricing demo card ---- */
.pw-demo{ margin:56px 0; }
.pw-demo-head{ text-align:center; margin-bottom:28px; }
.pw-demo-head h2{ font-size:1.6rem; }
.pw-demo-card{
  max-width:460px; margin:0 auto; background:var(--white); border:2px solid var(--ink);
  border-radius:var(--radius-lg); box-shadow:5px 5px 0 var(--gold); padding:26px;
}
.pw-demo-card .catch-preview{ background:var(--paper-deep); border-radius:12px; padding:16px; margin-bottom:18px; }
.pw-demo-card .catch-preview h5{ font-size:1rem; margin:0 0 4px; }
.pw-demo-card .catch-preview p{ font-size:.84rem; color:var(--ink-soft); margin:0; }
.price-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.price-row label{ font-size:.85rem; font-weight:700; color:var(--ink-soft); }
.price-row .price-input-wrap{ display:flex; align-items:center; gap:6px; background:var(--paper); border:1.5px solid var(--line); border-radius:10px; padding:8px 12px; }
.price-row .price-input-wrap span{ font-weight:700; color:var(--ink-soft); }
.price-row input{ border:none; background:transparent; font-family:inherit; font-size:.95rem; width:70px; }
.price-row input:focus{ outline:none; }
.split-preview{ font-size:.85rem; color:var(--ink-soft); background:var(--paper-deep); border-radius:10px; padding:12px 14px; margin-bottom:18px; }
.split-preview strong{ color:var(--leaf-deep); }

/* ---- final CTA (varies by login state) ---- */
.pw-final-cta{ text-align:center; margin:60px 0; padding:36px; border-radius:var(--radius-lg); }
.pw-final-cta.logged-out{ background:var(--paper-deep); }
.pw-final-cta.logged-in{ background:var(--ink); color:var(--paper); }
.pw-final-cta h3{ font-size:1.4rem; margin-bottom:8px; }
.pw-final-cta.logged-in h3{ color:var(--paper); }
.pw-final-cta p{ color:var(--ink-soft); margin-bottom:20px; }
.pw-final-cta.logged-in p{ color:#C9C2AE; }

@media (max-width:900px){
  .pw-steps{ grid-template-columns:1fr; }
  .pw-compare-grid{ grid-template-columns:1fr; }
}