/* ============================================================
   PLANS PAGE
   Shape modelled on zoom.com/en/lp/my-notes: problem-first hero,
   proof strip, benefit trio, four-step, ONE pricing block, personas,
   FAQ, closer. Tokens all inherited from styles.css.
   ============================================================ */

/* ---------- proof strip ---------- */
.proofstrip{background:var(--navy-deep);color:#fff;padding:52px 0}
.proofstrip h2{font-size:clamp(19px,2vw,24px);text-align:center;margin-bottom:30px;font-weight:500}
.pq-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pq{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:20px}
.pq p{font-family:var(--ff-display);font-size:15px;line-height:1.5;margin-bottom:14px}
.pq span{font-size:11.5px;color:rgba(255,255,255,.6);letter-spacing:.02em}

/* ---------- pricing ---------- */
.pricing{padding:96px 0;background:var(--offwhite)}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{
  background:#fff;border:1px solid var(--steel);border-radius:var(--r-lg);
  padding:30px 26px;display:flex;flex-direction:column;position:relative;
}
.plan.lead{border:2px solid var(--blue);box-shadow:0 20px 48px rgba(11,92,255,.13)}
.plan-flag{
  position:absolute;top:-12px;left:26px;background:var(--blue);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.06em;padding:5px 12px;border-radius:999px;
}
.plan-name{font-family:var(--ff-display);font-size:23px;font-weight:500;margin-bottom:6px}
.plan-for{font-size:12.5px;color:var(--grey);margin-bottom:18px;min-height:34px}
.plan-price{font-family:var(--ff-display);font-size:42px;font-weight:500;line-height:1}
.plan-term{font-size:12.5px;color:var(--grey);margin:8px 0 20px}
.plan .btn{width:100%}
.plan-gate{
  margin-top:12px;font-size:11.5px;color:#9A6B00;background:#FCF2D9;
  border-radius:var(--r-sm);padding:8px 11px;line-height:1.45;
}
.plan-hl{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.plan-hl h4{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--grey);margin:0 0 13px}
.plan-hl ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.plan-hl li{display:flex;gap:10px;font-size:13.5px;line-height:1.45}
.plan-hl li i{
  font-style:normal;color:var(--blue);font-weight:700;font-size:11px;flex-shrink:0;
  width:17px;height:17px;border-radius:999px;background:var(--tint);
  display:grid;place-items:center;margin-top:2px;
}
.plan-guar{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--grey);line-height:1.55;
}
.plan-guar b{color:var(--navy)}
.price-note{text-align:center;font-size:13px;color:var(--grey);margin-top:28px}

/* ---------- personas ----------
   NB: named .stage, not .who. styles.css already uses .who for the
   testimonial byline and sets display:flex on it. */
.stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stage{border:1px solid var(--steel);border-radius:var(--r-lg);padding:28px;background:#fff}
.stage .tag{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--blue);margin-bottom:12px}
.stage h3{font-size:19px;margin-bottom:10px}
.stage p{font-size:14px;color:var(--grey);line-height:1.55;margin-bottom:16px}
.stage a{font-size:13.5px;font-weight:600;color:var(--blue)}
.stage a:hover{text-decoration:underline}

/* ---------- faq ---------- */

@media (max-width:1000px){
  .pq-row{grid-template-columns:repeat(2,1fr)}
  .plan-grid,.stage-grid{grid-template-columns:1fr}
  .plan.lead{order:-1}
}
@media (max-width:640px){
  .pq-row{grid-template-columns:1fr}
  .pricing{padding:64px 0}
  .plan-for{min-height:0}
}

/* ---------- refunds ---------- */
.refunds{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.refund{
  border:1px solid var(--steel);border-radius:var(--r-lg);
  padding:28px;background:#fff;display:flex;flex-direction:column;
}
.refund-head{margin-bottom:16px}
.refund-name{display:block;font-family:var(--ff-display);font-size:21px;font-weight:500;margin-bottom:9px}
.refund-kind{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.07em;
  padding:5px 11px;border-radius:999px;
}
.refund-kind.money{background:#E2F5E9;color:#0E6B37}
.refund-kind.work{background:#FCF2D9;color:#8A5A00}
.refund p{font-size:14.5px;line-height:1.6;color:var(--grey);margin:0 0 13px}
.refund p b{color:var(--navy);font-weight:600}
.refund-how{
  margin-top:auto !important;padding-top:16px;border-top:1px solid var(--line);
  font-size:13.5px !important;
}
.refund-how a{color:var(--blue);font-weight:600}
.refund-how a:hover{text-decoration:underline}
.refund-foot{
  max-width:74ch;margin:32px auto 0;text-align:center;
  font-size:13.5px;line-height:1.7;color:var(--grey);
}
.refund-foot a{color:var(--blue);font-weight:600}
.refund-foot a:hover{text-decoration:underline}

@media (max-width:900px){ .refunds{grid-template-columns:1fr} }

.plan-alt{font-size:12.5px;color:var(--grey);margin:-10px 0 16px}
.plan-alt a{color:var(--blue);font-weight:600}
.plan-alt a:hover{text-decoration:underline}