/* ============================================================
   WebPies · pricing.css — tier cards + comparison table
   ============================================================ */

/* ---- tier cards ---- */
.tier{transition:transform .25s ease, box-shadow .25s ease;}
.tier:hover{transform:translateY(-5px);}
.tier:not(.tier-hl):hover{box-shadow:0 22px 52px -30px rgba(13,15,18,.42);}
.tier-hl:hover{box-shadow:0 26px 60px -28px rgba(13,15,18,.6);}

.tier-badge{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;white-space:nowrap;line-height:1;}
.tier-badge.out{box-shadow:inset 0 0 0 1px rgba(13,15,18,.22);color:var(--ink);}
.tier-badge.out-light{box-shadow:inset 0 0 0 1px rgba(245,241,234,.32);color:var(--cream);}
.tier-badge.fill{background:var(--lime);color:#0d0f12;}

.tier .feat-off{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px;}

/* ---- comparison table ---- */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:24px;box-shadow:inset 0 0 0 1px var(--line);}
.cmp{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;min-width:880px;background:var(--cream);}
.cmp > div{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;}

.cmp .cmp-h{font-family:'Instrument Serif',serif;font-size:21px;line-height:1.05;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:3px;background:var(--cream-2);min-height:72px;padding-top:12px;padding-bottom:12px;}
.cmp .cmp-h.feat{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);align-items:flex-start;justify-content:center;text-align:left;}
.cmp .cmp-h .nm{white-space:nowrap;}
.cmp .cmp-h .sub{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}

.cmp .cmp-cat{grid-column:1 / -1;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:var(--cream-2);padding:13px 20px;}

.cmp .feat-label{font-size:14.5px;color:var(--ink);line-height:1.3;}
.cmp .val{justify-content:center;text-align:center;font-size:13.5px;color:#3a3c40;}
.cmp .val.muted-txt{color:var(--muted);font-size:12.5px;}
.cmp .ck{color:var(--lime-deep);font-size:17px;line-height:1;}

/* dark-mode: these surfaces stay LIGHT (fixed lime tints), so force dark text;
   and the hardcoded-grey comparison values need a light tone on the dark table. */
html.theme-dark .cmp .val{color:#c7c3ba;}
html.theme-dark .cmp .cmp-h.hl{color:#0d0f12;}
html.theme-dark .cmp .cmp-h.hl .sub{color:rgba(13,15,18,.55);}
.cmp .no{color:#cbc6bc;font-size:16px;}

/* highlighted Business column */
.cmp .hl{background:rgba(200,242,92,.13);}
.cmp .cmp-h.hl{background:#edf6d4;}
.cmp .cmp-h.hl .nm{color:#0d0f12;}

.cmp .cmp-row-last > div{border-bottom:0;}

@media (max-width:640px){
  .cmp{min-width:760px;}
  .cmp > div{padding:13px 14px;}
  .cmp .cmp-h{font-size:18px;}
  .cmp .feat-label{font-size:13.5px;}
}