/* ============================================================
   LaithMD — Consultation packages
   Extends site.css. No new colours, no new type. Tokens only.
   The tier grid reuses the existing .cards hairline construction
   so it reads as part of the site, not as a bolted-on price table.
   ============================================================ */

/* Collapse-border grid. Borders are per-card and overlapped, so the featured
   tier can rise out of the row without breaking the hairline construction. */
.tiers{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  align-items:start;
  margin-top:var(--sp-8);
  padding-top:44px;            /* room for the raised tier */
}

.tier{
  background:var(--alabaster);
  border:1px solid var(--alabaster-2);
  margin-inline-start:-1px;
  padding:var(--sp-7) var(--sp-6) var(--sp-6);
  display:flex;
  flex-direction:column;
  position:relative;
}
.tier:first-child{margin-inline-start:0}

/* The recommended tier inverts to Ink. That inversion is the whole
   emphasis mechanism — no shadows, no scale transform, no gradient. */
.tier--featured{
  margin-top:-44px;            /* lifts the recommended tier above the row */
  border-color:var(--ink);
  z-index:1;
  background:var(--ink);
  color:var(--platinum-lt);
  --fg-muted:var(--platinum);
  --accent:var(--champagne);
}
.tier--featured .tier__name,
.tier--featured .tier__price,
.tier--featured h3{color:var(--white)}
.tier--featured .tier__dur,
.tier--featured .tier__lede{color:var(--platinum)}
.tier--featured .ticks li{color:var(--platinum-lt)}
.tier--featured .ticks svg{color:var(--champagne)}
.tier--featured .tier__rule{background:var(--graphite-2)}
.tier--featured .tier__from{color:var(--platinum)}

/* ---------- badge ---------- */
.tier__badge{
  position:absolute;
  top:0;
  inset-inline:0;
  background:var(--champagne);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  text-align:center;
  padding:12px 14px;
  line-height:1;
}
.tier--featured{padding-top:calc(44px + var(--sp-7))}
[dir="rtl"] .tier__badge{text-transform:none;letter-spacing:0;font-size:.75rem}

/* ---------- head ---------- */
.tier__name{
  font-family:var(--font-display);
  font-size:1.375rem;
  line-height:1.2;
  color:var(--ink);
  margin-bottom:6px;
}
[dir="rtl"] .tier__name{font-size:1.5rem}

.tier__dur{
  font-size:.6875rem;
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:#5F6266;
  display:block;
}
[dir="rtl"] .tier__dur{text-transform:none;letter-spacing:0;font-size:.8125rem}

.tier__price{
  font-family:var(--font-num);
  font-size:3rem;
  line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
  display:block;
  margin:var(--sp-5) 0 4px;
  letter-spacing:-.02em;
}
.tier__from{
  font-size:.75rem;
  color:#5F6266;
  display:block;
}

.tier__lede{
  font-size:.875rem;
  line-height:1.6;
  color:#5F6266;
  margin-top:var(--sp-4);
  min-height:3.8em;
}
[dir="rtl"] .tier__lede{font-size:.9375rem;line-height:1.8}

.tier__rule{
  height:1px;
  background:var(--alabaster-2);
  margin:var(--sp-5) 0;
}

/* ---------- feature list ---------- */
.tier .ticks{margin-bottom:var(--sp-6)}
.tier .ticks li{
  padding:7px 0;
  font-size:.875rem;
  line-height:1.5;
  align-items:flex-start;
}
.tier .ticks svg{width:15px;height:15px;margin-top:4px;color:var(--champagne-deep)}

.tier__inherit{
  font-size:.8125rem;
  letter-spacing:.02em;
  color:var(--champagne-deep);
  font-weight:500;
  padding:7px 0 12px;
  display:block;
}
.tier--featured .tier__inherit{color:var(--champagne)}

.tier .btn{margin-top:auto;width:100%}
.tier--featured .btn--ghost{color:var(--platinum-lt);border-color:var(--platinum)}

/* ---------- comparison table ---------- */
.cmp-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:collapse;margin-top:var(--sp-8);font-size:.875rem}
.cmp caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cmp-head{margin-top:var(--sp-9)}
.cmp-head h3{font-family:var(--font-display);font-size:var(--t-d2);color:var(--ink);margin-bottom:var(--sp-3)}
.cmp-head p{font-size:.9375rem;color:#5F6266;max-width:60ch}
[dir="rtl"] .cmp caption{text-transform:none;letter-spacing:0;font-size:.8125rem}
.cmp th,.cmp td{
  padding:var(--sp-4) var(--sp-3);
  border-bottom:1px solid var(--alabaster-2);
  text-align:start;
  vertical-align:middle;
}
.cmp thead th{
  font-family:var(--font-display);
  font-size:1rem;
  color:var(--ink);
  font-weight:400;
  border-bottom:1.5px solid var(--champagne-deep);
  white-space:nowrap;
}
.cmp thead th:first-child{font-family:var(--font-ui);font-size:.6875rem;
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:#5F6266;border-bottom-color:var(--alabaster-2)}
[dir="rtl"] .cmp thead th:first-child{text-transform:none;letter-spacing:0;font-size:.8125rem}
.cmp tbody th{font-weight:400;color:#2E2F31;width:38%}
.cmp td{text-align:center;width:20.6%}
.cmp .yes{color:var(--champagne-deep)}
.cmp .no{color:#5F6266}
.cmp svg{width:16px;height:16px;display:inline-block;vertical-align:middle}
.cmp .val{font-size:.8125rem;color:#2E2F31}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp col.is-featured{background:rgba(117,98,64,.05)}

.tiers-note{
  font-size:.8125rem;
  color:#5F6266;
  margin-top:var(--sp-6);
  max-width:70ch;
}
[dir="rtl"] .tiers-note{font-size:.875rem}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .tiers{grid-template-columns:1fr;gap:0;padding-top:44px}
  .tier{margin-inline-start:0;margin-top:-1px}
  .tier:first-child{margin-top:0}
  .tier--featured{margin-top:0}
  .tier__lede{min-height:0}
  .cmp{font-size:.8125rem}
  .cmp th,.cmp td{padding:var(--sp-3) var(--sp-2)}
}
@media (max-width:767px){
  .tier{padding:var(--sp-6) var(--sp-5) var(--sp-5)}
  .tier__price{font-size:2.5rem}
  .cmp{min-width:520px}
}