/* Pricing and switching pages: icon cards, check marks, step strip. Loaded only by those pages (and their translations).
   Tokens come from site.css, so dark mode and the Arabic mirror follow. Logical properties only. */

/* round icon badge */
.ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 4px; background: var(--green-soft); color: var(--green); flex: none; }
.ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* check and cross marks (drawn with a mask so they follow the text colour) */
.mk { display: inline-block; width: 20px; height: 20px; border-radius: 4px; vertical-align: -5px; margin-inline-end: 8px; position: relative; flex: none; }
.mk::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: var(--m) center / 14px no-repeat; mask: var(--m) center / 14px no-repeat; }
.mk.yes { background: var(--green-soft); color: var(--green); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 2.8 6-6.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mk.no { background: var(--bg-alt); color: var(--subtle); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* pricing: head card values, "decides" icons */
.cost-list .mk { margin-inline-end: 6px; }
.decides.icons li { grid-template-columns: 44px minmax(0, 1fr); align-items: center; }
.decides.icons li::before { content: none; }

/* icon cards */
.cards.icons .card .ico { margin-bottom: 14px; }

/* comparison tables with marks (they reuse .extra-table, so rows stack with data-label under 640px) */
.cmp-table caption { text-align: start; font-weight: 600; font-size: 15px; padding: 10px 12px 14px; color: var(--ink); }
.cmp-table td.mkcell { color: var(--ink); font-weight: 600; }
@media (min-width: 641px) { .cmp-table tbody th { width: 22%; } .cmp-table:not(.ba) td.mkcell { width: 24%; } .cmp-table.ba td:nth-child(2) { width: 26%; } .cmp-table.ba td.mkcell { font-weight: 400; } }
.cmp-table.ba td.mkcell { font-weight: 400; }
@media (max-width: 640px) { .cmp-table caption { display: block; padding: 6px 4px 10px; } .cmp-table tbody th { width: auto; } .cmp-table td.mkcell::before { font-weight: 600; } }

/* "coming from" strip */
.from-strip { display: grid; gap: 14px; margin: 0 0 40px; padding: 0; list-style: none; }
@media (min-width: 760px) { .from-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.from-strip li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-1); display: grid; gap: 4px; align-content: start; }
.from-strip .ico { margin-bottom: 10px; }
.from-strip strong { font-size: 17px; }
.from-strip span.t { color: var(--muted); font-size: 15px; }

/* step strip: numbered cards that become a plain list on narrow screens */
.steps.strip { max-width: none; margin: 0; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .steps.strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .steps.strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps.strip li { grid-template-columns: minmax(0, 1fr); gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 18px 20px; box-shadow: var(--shadow-1); align-content: start; }
.steps.strip li::before { width: 36px; height: 36px; background: var(--green); border-color: var(--green); color: var(--green-ink); font-size: 16px; }
.steps.strip strong { font-size: 16.5px; }
.steps.strip li > span { font-size: 15px; }

/* transfer cards: mark in front of each heading */
.transfer h3 .mk { margin-inline-end: 10px; vertical-align: -4px; }