/* ===========================================================================
   Pricing page — tier cards, comparison table, FAQ
   =========================================================================== */
.pricing-hero { padding-block: 60px 30px; background: linear-gradient(180deg,#fff,var(--surface)); text-align:center; }
.pricing-hero .wrap { max-width: 760px; }
.pricing-hero .eyebrow { justify-content:center; }
.pricing-hero h1 { font-size: clamp(34px,5vw,52px); }

.tier-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; }
.tier {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:30px 24px; display:flex; flex-direction:column; position:relative;
}
.tier--feat { border:2px solid var(--blue-600); box-shadow:var(--shadow-lg); }
.tier-flag { position:absolute; inset-block-start:-13px; inset-inline-start:50%; transform:translateX(50%); background:var(--blue-600); color:#fff; font-family:var(--font-head); font-weight:500; font-size:12.5px; padding:6px 16px; border-radius:var(--r-pill); white-space:nowrap; }
[dir="ltr"] .tier-flag { transform:translateX(-50%); }
.tier-name { font-family:var(--font-head); font-weight:600; font-size:20px; color:var(--ink-900); }
.tier-desc { font-size:14.5px; color:var(--ink-400); margin-block:4px 18px; min-height:42px; }
.tier-price { display:flex; align-items:baseline; gap:4px; font-family:var(--font-head); color:var(--ink-900); }
.tier-price .cur { font-size:24px; font-weight:500; color:var(--ink-400); }
.tier-price .val { font-size:46px; font-weight:600; letter-spacing:-.02em; line-height:1; }
.tier-price .mo { font-size:16px; color:var(--ink-400); font-weight:500; }
.tier-vat { font-size:13px; color:var(--ink-300); margin-block:8px 22px; }
.tier .btn { margin-block-end:24px; }
.tier-feats { display:grid; gap:13px; }
.tier-feats li { display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--ink-500); }
.tier-feats .ck { flex:none; width:20px; height:20px; border-radius:50%; background:var(--green-100); color:var(--green-600); display:grid; place-items:center; margin-block-start:1px; }
.tier-feats .ck svg { width:12px; height:12px; }
.tier-feats .ck--off { background:var(--surface-2); color:var(--ink-300); }
.tier-feats li.off { color:var(--ink-300); }

/* comparison table */
.cmp-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.cmp-table th, .cmp-table td { padding:16px 20px; text-align:start; border-bottom:1px solid var(--line); font-size:15px; }
.cmp-table thead th { background:var(--surface); font-family:var(--font-head); font-weight:600; color:var(--ink-900); font-size:15px; }
.cmp-table thead th:not(:first-child), .cmp-table td:not(:first-child) { text-align:center; }
.cmp-table tbody th { font-weight:500; color:var(--ink-600,var(--ink-500)); font-family:var(--font-body); }
.cmp-table td { color:var(--ink-500); }
.cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom:0; }
.cmp-table .feat-col { background:var(--blue-50); }
.cmp-yes { color:var(--green-600); font-weight:600; }
.cmp-no { color:var(--ink-300); }
.cmp-val { font-family:var(--font-mono); color:var(--ink-700); }
.cmp-table thead .col-feat { color:var(--blue-700); }

/* FAQ */
.faq { max-width:760px; margin-inline:auto; display:grid; gap:14px; }
.faq-item { background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:0; overflow:hidden; }
.faq-q { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:20px 24px; font-family:var(--font-head); font-weight:500; font-size:17px; color:var(--ink-900); text-align:start; cursor:pointer; }
.faq-q .fc { flex:none; width:24px; height:24px; color:var(--blue-600); transition:transform .25s; }
.faq-item.open .faq-q .fc { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p { padding:0 24px 20px; font-size:15.5px; color:var(--ink-500); }
.faq-item.open .faq-a { max-height:220px; }

@media (max-width:1024px) {
  .tier-grid { grid-template-columns:repeat(2,1fr); max-width:720px; margin-inline:auto; }
}
@media (max-width:560px) {
  .tier-grid { grid-template-columns:1fr; max-width:420px; }
}
@media (max-width:900px) {
  .cmp-wrap { overflow-x:auto; }
  .cmp-table { min-width:560px; }
}