/* Trial: the Meta bit, ported from the phase 2 Free trial concept (ft-meta): two cards, one bill each. Side by side,
   the two cards span four shared rows (name, text, payment method, link), so they share one height and their payment
   panels start level (the Level Row Rule). Logical properties, so Arabic mirrors. */
.ft-meta-head { display: grid; gap: 18px; max-width: 900px; }
.ft-meta-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: clamp(36px, 4.4vw, 56px); }
.ft-meta-card {
  min-width: 0;
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 14px;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--r-xl);
  background: var(--k);
}
@supports not (grid-template-rows: subgrid) {
  .ft-meta-card { display: flex; flex-direction: column; gap: 14px; }
}
.ft-meta-card h3 { font: 800 1.4rem/1.25 var(--text); letter-spacing: -0.01em; }
.ft-meta-card p { font-size: 17px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.ft-meta-pic { align-self: end; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 14px 16px; border-radius: 20px; background: var(--sheet-bg); color: var(--ink); box-shadow: var(--shadow-sm); }
.ft-meta-pic > .i { grid-row: 1 / span 2; width: 28px; height: 28px; color: var(--accent-ink); }
.ft-meta-pic small { grid-column: 2; font-size: 13px; color: var(--ink-soft); }
.ft-meta-pic b { grid-column: 2; font: 800 16px/1.3 var(--text); }
.ft-meta-pic .tag { grid-column: 3; grid-row: 1 / span 2; }
.ft-meta-card .link { justify-self: start; }
@media (max-width: 879px) {
  .ft-meta-list { grid-template-columns: minmax(0, 1fr); }
  .ft-meta-card { grid-row: auto; display: flex; flex-direction: column; }
}