/* ============================================================
   zlorp — pricing page additions (loads after styles.css)
   ============================================================ */

/* plan eyebrow on cards */
.pcard__eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.pcard__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }
.pcard.featured .pcard__eyebrow { color: var(--brand); }
.pcard.featured .pcard__eyebrow::before { background: var(--brand); }

/* hero stat tweaks for ₹ values */
.stat__num.small { font-size: clamp(34px, 4vw, 48px); }

/* ============================================================
   Comparison table
   ============================================================ */
.compare { margin-top: 56px; }
.compare__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); -webkit-overflow-scrolling: touch; }
.ctable { width: 100%; min-width: 820px; border-collapse: collapse; }
.ctable th, .ctable td { text-align: left; padding: 16px 22px; vertical-align: middle; }

/* sticky header */
.ctable thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
}
.ctable thead th:first-child { background: var(--bg-2); }
.ch__name { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.02em; color: var(--ink); }
.ch__price { font-size: 13px; color: var(--ink-3); font-family: var(--font-mono); margin-top: 4px; }
.ch__lead { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 8px; }

/* plan value columns */
.ctable th:not(:first-child), .ctable td:not(:first-child) { text-align: center; width: 15%; }

/* highlighted (growth) column */
.ctable th.col-hi, .ctable td.col-hi { background: color-mix(in oklch, var(--brand) 5%, var(--surface)); }
.ctable thead th.col-hi { background: color-mix(in oklch, var(--brand) 9%, var(--bg-2)); box-shadow: inset 0 -2px 0 var(--brand); }
.col-hi .ch__name { color: var(--brand); }
.ch__tag { display: inline-block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; background: var(--brand); color: #fff; padding: 3px 8px; border-radius: 999px; margin-bottom: 8px; }

/* group rows */
.ctable .grp td {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); background: var(--bg-2);
  padding-top: 18px; padding-bottom: 12px; font-weight: 500;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-2);
}

/* feature rows */
.ctable tbody tr.feat { border-bottom: 1px solid var(--line-2); transition: background .2s; }
.ctable tbody tr.feat:hover { background: var(--bg); }
.feat__name { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.feat__sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; font-weight: 400; }
.ctable td .val { font-size: 14px; font-weight: 600; color: var(--ink); }
.ctable td .val.muted { color: var(--ink-3); font-weight: 500; }

/* check / dash glyphs */
.gly { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.gly.yes { background: color-mix(in oklch, var(--brand) 14%, white); color: var(--brand); }
.gly.no { color: var(--line); }
.gly.no::before { content: ""; width: 12px; height: 2px; border-radius: 2px; background: currentColor; }
.col-hi .gly.yes { background: color-mix(in oklch, var(--brand) 22%, white); }

/* ============================================================
   Q&A reassurance cards
   ============================================================ */
.qgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 12px; }
.qcard {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  padding: 30px; transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.qcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.qcard__q { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.qcard h3 { font-size: clamp(20px, 2.2vw, 25px); margin-top: 14px; }
.qcard p { margin-top: 12px; font-size: 14.5px; color: var(--ink-2); }

@media (max-width: 1000px) {
  .qgrid { grid-template-columns: 1fr; }
}