/* ==========================================================================
   HDI — plan card variants (INR plans: monthly, lifetime, unlimited)
   ========================================================================== */

.plan__per{
  font-family:var(--font-body);
  font-size:.8rem;font-weight:500;color:var(--muted);
  margin-left:3px;letter-spacing:0;
}
.plan__first{display:block;font-size:.78rem;color:var(--muted);margin-bottom:2px}
.plan__strike{
  text-decoration:line-through;
  color:#9C97AC;
  margin:0 2px;
}
.plan__save{
  display:inline-block;margin-top:7px;
  font-size:.68rem;font-weight:700;letter-spacing:.01em;
  color:var(--brand-700);background:var(--brand-050);
  border:1px solid rgba(162,144,183,.22);
  padding:3px 9px;border-radius:100px;
}
.plan__price{min-height:auto}

/* single wide plan (unlimited websites) */
.plans--single{grid-template-columns:1fr}
.plan--wide{padding:30px 32px}
.plan__wide{
  display:grid;grid-template-columns:minmax(260px,330px) 1fr;
  gap:clamp(20px,4vw,48px);align-items:center;
}
.plan__wide .plan__top h3{font-size:1.4rem}
.plan__wide .plan__price{margin-bottom:14px}
.plan__feats--2{grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:0}
.plan__wide .plan__note{margin-top:10px}

@media (max-width:900px){
  .plan__wide{grid-template-columns:1fr}
}
@media (max-width:640px){
  .plan__feats--2{grid-template-columns:1fr}
  .plan--wide{padding:24px 20px}
  /* three tabs: two on top, the last one full width */
  .tabs{grid-template-columns:1fr 1fr}
  .tabs .tab{padding:10px 8px;font-size:.8rem;line-height:1.25}
  .tabs .tab:last-child{grid-column:1/-1}
}


/* ---------- promo banner inside the plan tabs ---------- */
.promo{
  grid-column:1/-1;
  display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  padding:14px 18px;margin-bottom:6px;
  background:#fff;border:1px dashed var(--brand-100);border-radius:14px;
  box-shadow:var(--shadow-sm);
}
.promo__ico{
  flex-shrink:0;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--brand-050);border:1px solid rgba(162,144,183,.28);
  color:var(--brand-700);font-family:var(--font-head);font-weight:800;font-size:.9rem;
}
.promo__text{margin:0;font-size:.92rem;color:var(--muted)}
.promo__text strong{color:var(--ink);font-weight:700}
.promo__note{font-size:.78rem;color:#6B6579;line-height:1.4}
.promo__code{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 13px;border-radius:9px;
  background:var(--ink);color:#fff;
  border:1px dashed rgba(255,255,255,.42);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem;font-weight:700;letter-spacing:.1em;
  transition:background .18s,transform .18s;
}
.promo__code:hover{background:var(--brand-700);transform:translateY(-1px)}
.promo__code.is-copied{background:#4F4560}
.promo__copy{
  font-family:var(--font-body);font-size:.62rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;opacity:.62;
}
@media (max-width:640px){
  .promo{padding:13px 14px;gap:8px 10px}
  .promo__text{font-size:.86rem}
  .promo__note{font-size:.74rem;width:100%}
}

/* ---------- payment methods strip under the plans ---------- */
.pay{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  margin-top:16px;padding:14px 18px;border-radius:14px;
  background:#fff;border:1px solid var(--line);
}
.pay__label{
  font-family:var(--font-head);font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand-700);margin-right:4px;
}
.pay__opt{
  font-size:.84rem;color:var(--muted);
  display:inline-flex;align-items:baseline;gap:7px;
  padding:4px 11px;border-radius:100px;background:var(--brand-050);
  border:1px solid rgba(162,144,183,.22);
}
.pay__opt b{font-family:var(--font-head);font-size:.74rem;color:var(--ink);font-weight:700}
@media (max-width:640px){
  .pay{padding:12px 14px;gap:7px}
  .pay__opt{font-size:.78rem;width:100%}
}

/* footer payment line */
.footer__pay{
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
  padding:16px 0 4px;font-size:.78rem;color:rgba(255,255,255,.55);
  border-top:1px solid rgba(255,255,255,.1);
}
.footer__pay b{color:#fff;font-weight:600}

/* custom / quote plan card */
.plan--custom{border-style:dashed;border-color:rgba(162,144,183,.45);background:linear-gradient(170deg,#fff,#FDF9F4)}
.plan--custom .plan__then strong{font-size:1.55rem;color:var(--brand-700)}
.plan--custom .plan__specs b{color:var(--brand-700)}