/* Trial terms, ported from the phase 2 Free trial concept (ft-terms): four answers, each with a small picture of what
   it means. Each card spans four rows of the list grid (picture, question, answer, link), so the pictures start level
   and share one height, the questions line up and the link sits at the foot (the Level Row Rule). The pictures
   illustrate; the text carries it. Logical properties, so Arabic mirrors. */
.ft-terms-head { display: grid; gap: 18px; max-width: 900px; }
.ft-terms-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px clamp(14px, 1.6vw, 22px); margin-top: clamp(40px, 5vw, 64px); }
.ft-terms-card {
  min-width: 0;
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 14px;
  padding: 14px 14px clamp(20px, 2.2vw, 26px);
  border-radius: var(--r-lg);
  background: var(--k);
}
@supports not (grid-template-rows: subgrid) {
  .ft-terms-card { display: flex; flex-direction: column; gap: 14px; }
}
.ft-terms-pic { min-width: 0; min-height: 172px; display: grid; align-content: center; gap: 10px; padding: 14px; border-radius: 22px; background: var(--sheet-bg); color: var(--ink); box-shadow: var(--shadow-sm); }
.ft-terms-card h3 { padding-inline: 8px; font: 800 1.2rem/1.25 var(--text); letter-spacing: -0.01em; text-wrap: balance; }
.ft-terms-text { display: grid; gap: 10px; align-content: start; padding-inline: 8px; }
.ft-terms-text p { font-size: 16px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.ft-terms-text a { color: var(--accent-ink); font-weight: 700; }
.ft-terms-card > .link { justify-self: start; min-height: 44px; margin-inline: 8px; margin-top: -4px; }
.ft-terms-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; font: 800 14px/1.25 var(--text); }
.ft-terms-top .tag { min-height: 26px; padding: 2px 10px; font-size: 12px; }
/* 1: the countdown and the cap, as the app shows them (bars, not rings) */
.ft-terms-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 13px; line-height: 1.3; color: var(--ink-soft); }
.ft-terms-meter b { font: 800 14px/1.3 var(--text); color: var(--ink); font-variant-numeric: tabular-nums; text-align: end; }
.ft-terms-meter i { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ft-terms-meter i::before { content: ""; display: block; height: 100%; border-radius: inherit; background: var(--sky); transform: scaleX(var(--v)); transform-origin: left; }
[dir="rtl"] .ft-terms-meter i::before { transform-origin: right; }
/* 2: two bills, only one of them yours to Flowella */
.ft-terms-bill { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.35; }
.ft-terms-bill b { font: 800 14px/1.2 var(--text); }
.ft-terms-bill span { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-soft); }
.ft-terms-bill .i { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.ft-terms-bill.is-yes { background: var(--field-green); box-shadow: none; }
.ft-terms-bill.is-yes span { color: var(--ink); }
/* 3: the watermark, on a message in the chat */
.ft-terms-chat { background: var(--chat-bg); align-content: center; }
.ft-terms-chat .bubble { max-width: 100%; font-size: 14px; }
.ft-terms-mark { display: block; margin-top: 6px; font: 600 12px/1.3 var(--text); color: var(--ink-soft); }
/* 4: what stays when you upgrade */
.ft-terms-kept ul { display: grid; gap: 6px; }
.ft-terms-kept li { display: flex; align-items: center; gap: 8px; font: 700 14px/1.3 var(--text); }
.ft-terms-kept li .i { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--green); color: var(--on-bright); }
.ft-terms-plans { display: flex; flex-wrap: wrap; gap: 6px; }
.ft-terms-plans .tag { min-height: 28px; box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 1179px) {
  .ft-terms-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .ft-terms-list { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .ft-terms-pic { min-height: 0; }
}