/* Главная (выбранный вариант home-main): правки поверх style/variants/main.css. */

/* Переключатель вариантов и подписи блоков — инструмент ревью, на странице не нужны. */
.vs, .vtag { display: none !important; }
body.vs-open { padding-right: 0 !important; }

/* ---------- 1. Баннер-аккордеон (как на gameseal.com) ---------- */
.heroG { --ease: cubic-bezier(.65, 0, .35, 1); display: flex; gap: 12px; height: 420px; }
.heroG__it {
  position: relative; flex: 0 0 116px; min-width: 0; border-radius: 26px; overflow: hidden;
  background: #101116; color: #fff; isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: flex .65s var(--ease), box-shadow .4s;
}
.heroG__it.on { flex: 1 1 auto; box-shadow: 0 24px 50px -24px rgba(16, 17, 22, .55), inset 0 0 0 1px rgba(255, 255, 255, .08); }

/* картинка: у свёрнутых приглушена, у раскрытой — во всю силу */
.heroG__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  filter: saturate(.7) brightness(.55); transform: scale(1.08);
  transition: filter .65s var(--ease), transform 1.2s var(--ease);
}
.heroG__it:not(.on):hover .heroG__bg { filter: saturate(.95) brightness(.8); }
.heroG__it.on .heroG__bg { filter: none; transform: scale(1); }
.heroG__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 11, 15, .1) 30%, rgba(10, 11, 15, .85)); transition: opacity .65s var(--ease); }
/* слева под текстом — глубокая тень: в артах часто нарисован свой логотип */
.heroG__it.on .heroG__shade {
  background:
    linear-gradient(90deg, rgba(10, 11, 15, .96) 0%, rgba(10, 11, 15, .9) 28%, rgba(10, 11, 15, .55) 50%, rgba(10, 11, 15, .08) 72%, rgba(10, 11, 15, 0) 100%),
    linear-gradient(0deg, rgba(10, 11, 15, .45), rgba(10, 11, 15, 0) 40%);
}
.heroG__it.on .heroG__bg { object-position: 75% center; }

/* свёрнутый: иконка сверху, название по вертикали, цена внизу */
.heroG__strip {
  position: absolute; inset: 18px 0 20px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  transition: opacity .25s;
}
.heroG__strip b {
  flex: 1; min-height: 0; writing-mode: vertical-rl; transform: rotate(180deg);
  font: 700 15px/1.2 var(--display); letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.heroG__strip em { font: 800 13px var(--display); font-style: normal; background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); padding: 5px 9px; border-radius: 10px; }
.heroG__ic { width: 44px; height: 44px; flex: none; border-radius: 13px; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.heroG__ic img, .heroG__ic .gicon { width: 28px; height: 28px; object-fit: contain; border-radius: 7px; font-size: 10px; }
.heroG__it.on .heroG__strip { opacity: 0; pointer-events: none; transition-duration: .15s; }

/* раскрытый: фиксированная ширина текста — не переносится, пока баннер растёт */
.heroG__panel {
  position: absolute; left: 48px; bottom: 48px; width: 460px; max-width: calc(100% - 96px);
  display: flex; flex-direction: column; gap: 16px;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.heroG__it.on .heroG__panel { opacity: 1; transform: none; pointer-events: auto; transition: opacity .45s .35s, transform .55s .3s var(--ease); }
.heroG__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.heroG__chips .heroG__ic { width: 34px; height: 34px; border-radius: 10px; box-shadow: none; }
.heroG__chips .heroG__ic img, .heroG__chips .heroG__ic .gicon { width: 22px; height: 22px; }
.heroG__chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(10px); font: 700 12px var(--body); letter-spacing: .04em; }
.heroG__chip--g { color: #b9f3d8; }
.heroG__chip--hot { background: var(--brand); border-color: transparent; }
.heroG__t { font: 800 clamp(28px, 3.1vw, 44px)/1.04 var(--display); letter-spacing: -.025em; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.heroG__sub { display: flex; gap: 18px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.heroG__sub i { font-style: normal; }
.heroG__buy { display: flex; align-items: center; gap: 22px; margin-top: 4px; }
.heroG__price { display: flex; flex-direction: column; line-height: 1.05; }
.heroG__price .now { font: 800 32px var(--display); letter-spacing: -.02em; }
.heroG__price s { color: rgba(255, 255, 255, .55); font-size: 15px; order: -1; }
.heroG__cta { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 26px; font-size: 16px; border-radius: 16px; box-shadow: 0 10px 24px -8px rgba(255, 90, 31, .7); transition: transform .2s, box-shadow .2s; }
.heroG__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(255, 90, 31, .8); }

/* таймер автосмены — тонкая полоска по низу раскрытого баннера */
.heroG__bar { position: absolute; left: 48px; right: 48px; bottom: 22px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; opacity: 0; transition: opacity .3s; }
.heroG__bar i { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; }
.heroG__it.on .heroG__bar { opacity: 1; }
.heroG__it.on .heroG__bar i { animation: heroGbar 5s linear forwards; }
.heroG.paused .heroG__bar i { animation-play-state: paused; }
@keyframes heroGbar { to { width: 100%; } }

@media (max-width: 1100px) {
  .heroG { height: 380px; gap: 10px; }
  .heroG__it { flex-basis: 84px; border-radius: 22px; }
  .heroG__panel { left: 32px; bottom: 40px; max-width: calc(100% - 64px); }
  .heroG__bar { left: 32px; right: 32px; }
}
@media (max-width: 640px) {
  /* на телефоне полос нет — один баннер, листается сам */
  .heroG { height: 320px; }
  .heroG__it:not(.on) { display: none; }
  .heroG__panel { left: 20px; right: 20px; bottom: 34px; width: auto; max-width: none; }
  .heroG__bar { left: 20px; right: 20px; bottom: 16px; }
  .heroG__sub { display: none; }
}

/* ---------- 2. GLOBAL на карточке ---------- */
.cardA .cardA__glob { position: static; height: 26px; padding: 0 9px; box-shadow: none; }
.cardA__tags { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; }
.cardA__tags .cardA__type { position: static; }
.cardA__buy { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
/* вариант «над корзиной» (#glob=cart) */
.cardA--glob-cart .cardA__foot { align-items: flex-end; }
.cardA--glob-cart .cardA__buy .cardA__glob { height: 22px; padding: 0 8px; font-size: 10px; background: #e9f7f1; }

/* ---------- 4. Наведение на карточку без серых углов ----------
   Ряд прокручивается по горизонтали и обрезал тень поднятой карточки
   прямоугольником. Даём тени место внутри ряда, сдвигая поля наружу. */
.prow__track { padding: 14px 16px 34px; margin: -14px -16px -22px; scroll-padding-left: 16px; }
.cardA:hover { box-shadow: 0 2px 6px rgba(20, 21, 27, .05), 0 18px 36px -14px rgba(20, 21, 27, .26); }

/* ---------- 5. Мгновенная доставка: только ключ ---------- */
.deliv__key code { letter-spacing: .04em; }
.deliv__ok { margin-top: 10px; }

/* ---------- 6. Значки доверия: меньше и чётко (вектор) ---------- */
.ftrM__trust { gap: 22px; }
.ftrM__trust .tb { display: inline-flex; }
.ftrM__trust .tb svg { height: 30px; width: auto; display: block; }
@media (max-width: 640px) { .ftrM__trust .tb svg { height: 26px; } }

/* ---------- 7. Названия категорий жирным ---------- */
.catsA a > span:last-child { font-weight: 800; font-size: 14.5px; color: var(--ink); }
.catsA a > span:last-child small { font-weight: 500; }

/* ===================== round 3 ===================== */

/* 1. Banner like gameseal.com: three slanted panels; collapsed ones show the artwork with the title on top */
.heroG--seal { --sk: 46px; gap: 0; height: 440px; border-radius: 28px; overflow: hidden; }
.heroG--seal .heroG__it { flex: 0 0 300px; border-radius: 0; margin-left: calc(14px - var(--sk)); clip-path: polygon(var(--sk) 0, 100% 0, calc(100% - var(--sk)) 100%, 0 100%); box-shadow: none; }
.heroG--seal .heroG__it:first-child { margin-left: 0; clip-path: polygon(0 0, 100% 0, calc(100% - var(--sk)) 100%, 0 100%); }
.heroG--seal .heroG__it:last-child { clip-path: polygon(var(--sk) 0, 100% 0, 100% 100%, 0 100%); }
.heroG--seal .heroG__it.on { flex: 1 1 auto; box-shadow: none; }
.heroG--seal .heroG__it:not(.on) .heroG__bg { filter: saturate(.95) brightness(.8); }
.heroG--seal .heroG__it:not(.on):hover .heroG__bg { filter: none; }
.heroG--seal .heroG__strip { display: none !important; }
.heroG--seal .heroG__peek { position: absolute; z-index: 2; left: calc(var(--sk) + 16px); right: 24px; top: 26px; display: flex; flex-direction: column; gap: 8px; color: #fff; transition: opacity .3s; }
.heroG--seal .heroG__peek b { font: 700 22px/1.15 var(--display); letter-spacing: -.02em; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.heroG--seal .heroG__peek em { align-self: flex-start; font: 700 14px var(--body); font-style: normal; background: var(--brand); padding: 5px 10px; border-radius: 9px; }
.heroG--seal .heroG__it:first-child .heroG__peek { left: 24px; }
.heroG--seal .heroG__it.on .heroG__peek { opacity: 0; pointer-events: none; }
.heroG--seal .heroG__it:not(.on) .heroG__shade { background: linear-gradient(180deg, rgba(10, 10, 14, .75), rgba(10, 10, 14, .1) 55%); }
.heroG--seal .heroG__it.on .heroG__panel { left: 44px; }
.heroG--seal .heroG__it:not(:first-child).on .heroG__panel { left: calc(var(--sk) + 34px); }
.heroG--seal .heroG__bar { left: calc(var(--sk) + 20px); right: calc(var(--sk) + 20px); }
@media (max-width: 1100px) { .heroG--seal .heroG__it { flex-basis: 200px; } .heroG--seal .heroG__peek b { font-size: 17px; } }
@media (max-width: 640px) {
  .heroG--seal { height: 470px; border-radius: 22px; }
  .heroG--seal .heroG__it, .heroG--seal .heroG__it:first-child, .heroG--seal .heroG__it:last-child { clip-path: none; margin-left: 0; }
  .heroG--seal .heroG__it.on .heroG__panel { left: 20px; }
}

/* 2. Card: platform · type · GLOBAL under the title, larger and clearer */
.cardA__tags { display: none; }
.cardA__pf { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.cardA__pf i { font-style: normal; color: var(--line-2); }
.cardA__pfG { display: inline-flex; align-items: center; gap: 4px; color: #067a54; font-weight: 800; letter-spacing: .06em; font-size: 13px; }
.cardA__pfG svg { width: 13px; height: 13px; }
.cardA--glob-cart .cardA__glob { display: none; }
@media (max-width: 640px) { .cardA__pf { font-size: 12px; gap: 4px; } .cardA__pfG { font-size: 11px; } }

/* 6. Trust badges: same height, evenly spaced */
.ftrM__mid { align-items: center; }
.ftrM__trust { display: flex; align-items: center; justify-content: space-between; gap: 34px; flex: 0 1 520px; }
.ftrM__trust .tb { display: flex; align-items: center; justify-content: center; flex: 1 1 0; height: 30px; }
.ftrM__trust .tb img { height: 28px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: normal; }
.ftrM__trust a.tb { transition: opacity .2s; }
.ftrM__trust a.tb:hover { opacity: .75; }
@media (max-width: 760px) { .ftrM__trust { flex-basis: 100%; gap: 18px; } .ftrM__trust .tb img { height: 22px; } }

/* payment icons: PayPal, UnionPay, Skrill, Crypto, "and more" */
.pi svg { height: 18px; width: auto; }
.pi--up { padding: 0 6px; }
.pi--up svg { height: 24px; }
.pi__more { font-size: 13px; font-weight: 600; color: var(--mute); padding-left: 4px; white-space: nowrap; }
.ftrM__pay { row-gap: 8px; }

/* 9. Header: a bit bigger and taller */
.hdr__row { height: 96px; gap: 18px; }
.hdr__logo img { height: 50px; }
.hdr__search { height: 56px; border-radius: 16px; font-size: 16px; }
.hdr__gamesBtn, .hdr__localeBtn { height: 52px; font-size: 16px; }
.hdr__login { height: 52px; padding: 0 24px; font-size: 16px; }
.hdr__icon { width: 52px; height: 52px; }
.hdr__icon svg { width: 26px; height: 26px; }
@media (max-width: 960px) { .hdr__row { height: auto; } .hdr__logo img { height: 40px; } .hdr__search { height: 50px; } }
/* trust badges: own centered row, equal gaps */
.ftrM__mid { flex-direction: column; align-items: stretch; gap: 16px; }
.ftrM__pay { justify-content: center; }
.ftrM__trust { flex: none; justify-content: center; gap: 56px; padding-top: 14px; border-top: 1px dashed var(--line); }
.ftrM__trust .tb { flex: none; height: 28px; }
.ftrM__trust .tb img { height: 28px; }
.pi--up svg { height: 22px; }
@media (max-width: 640px) { .ftrM__trust { gap: 22px; } .ftrM__trust .tb, .ftrM__trust .tb img { height: 20px; } }
/* phone header: keep the bigger desktop sizes off small screens */
@media (max-width: 960px) {
  .hdr__row { gap: 8px; }
  .hdr__icon { width: 44px; height: 44px; }
  .hdr__icon svg { width: 22px; height: 22px; }
  .hdr__login { height: 44px; padding: 0 16px; font-size: 15px; }
  .hdr__localeBtn { height: 44px; font-size: 14px; }
}
@media (max-width: 480px) { .hdr__login { width: 44px; padding: 0; font-size: 0; } .hdr__row { gap: 4px; } }

/* ===================== round 4 ===================== */
/* card meta: A — framed chips */
.pf { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 13px; line-height: 1; }
.pf img { width: 15px; height: 15px; object-fit: contain; border-radius: 3px; flex: none; }
.pf svg { width: 12px; height: 12px; flex: none; }
.pf > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pf--chips > span { height: 26px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--ink); font-weight: 600; background: var(--card); }
.pf--chips .pf__type { color: var(--ink-2); }
.pf__g { color: #067a54; font-weight: 800; letter-spacing: .06em; font-size: 12px; }
.pf--chips .pf__g { border-color: #9fdcc4; background: #ecf9f3; color: #067a54; }
/* B — platform icon + bold name, type, GLOBAL pinned right */
.pf--icon { gap: 10px; font-size: 14px; }
.pf--icon .pf__plat img { width: 20px; height: 20px; padding: 2px; border-radius: 6px; background: var(--paper); }
.pf--icon .pf__plat b { font-weight: 700; color: var(--ink); }
.pf--icon .pf__type { color: var(--mute); font-weight: 600; padding-left: 10px; border-left: 1px solid var(--line-2); }
.pf--icon .pf__g { margin-left: auto; height: 24px; padding: 0 8px; border-radius: 999px; background: #ecf9f3; }
/* C — one framed bar split into three cells */
.pf--bar { display: inline-flex; flex-wrap: nowrap; gap: 0; align-self: flex-start; max-width: 100%; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--card); }
.pf--bar > span { height: 28px; padding: 0 10px; font-weight: 600; color: var(--ink); }
.pf--bar > span + span { border-left: 1px solid var(--line-2); }
.pf--bar .pf__type { color: var(--ink-2); }
.pf--bar .pf__g { background: #ecf9f3; }
.cardA__body .pf, .cardC__body .pf { margin: 2px 0 6px; }
.pf > span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .pf { font-size: 11px; gap: 4px; } .pf--chips > span, .pf--bar > span { height: 22px; padding: 0 6px; } .pf__g { font-size: 10px; } .pf--icon .pf__type { padding-left: 6px; } }

/* the review switcher shows only the card-meta row here */
html body.vs-on .vs { display: block !important; }
html body.vs-on .vs.open { display: flex !important; }

/* Apple Pay light, Google Pay with the 4-colour G */
.pi--pay { gap: 4px; color: #000; font: 600 15px -apple-system, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: -.01em; }
.pi--pay svg { height: 15px; width: 15px; }

/* trust badges at the very bottom of the footer */
.ftrM__mid { flex-direction: row; justify-content: center; padding: 18px 0; }
.ftrM__trust { margin-top: 18px; padding: 22px 0 6px; border-top: 1px solid var(--line); border-bottom: 0; gap: 48px; flex-wrap: wrap; }
.ftrM__trust .tb, .ftrM__trust .tb img { height: 26px; }
.ftrM__trust .tb img { opacity: .9; transition: opacity .2s; }
.ftrM__trust .tb:hover img { opacity: 1; }
@media (max-width: 640px) { .ftrM__trust { gap: 20px 26px; } .ftrM__trust .tb, .ftrM__trust .tb img { height: 20px; } }

/* header counters: number exactly in the middle of the circle */
.hdr__icon b { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; top: 2px; right: 1px; font: 700 11px/1 var(--body); font-variant-numeric: tabular-nums; border-radius: 10px; box-sizing: border-box; }
/* card meta always on one line: the platform name shrinks with an ellipsis */
.cardA__body .pf, .cardC__body .pf { flex-wrap: nowrap; min-width: 0; max-width: 100%; }
.pf > span { flex: none; min-width: 0; }
.pf > .pf__plat { flex: 0 1 auto; }
.pf__plat b, .pf__plat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf--chips { gap: 5px; font-size: 12.5px; }
.pf--chips > span { height: 26px; padding: 0 8px; }
.pf--icon { gap: 8px; font-size: 13.5px; }
.pf--icon .pf__type { padding-left: 8px; }
.pf--icon .pf__g { padding: 0 7px; font-size: 11px; }
.pf--bar > span { padding: 0 8px; font-size: 12.5px; }
.pf--bar .pf__g { font-size: 11px; }

/* banner G: lighter animation — width only, dimming by an overlay instead of image filters */
.heroG--seal .heroG__it { transition: flex .52s cubic-bezier(.4, 0, .2, 1); contain: layout paint; }
.heroG--seal .heroG__bg, .heroG--seal .heroG__it:not(.on) .heroG__bg, .heroG--seal .heroG__it:not(.on):hover .heroG__bg { filter: none; transform: none; transition: none; will-change: auto; }
.heroG--seal .heroG__it::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10, 10, 14, .28); opacity: 1; transition: opacity .35s; pointer-events: none; }
.heroG--seal .heroG__it.on::after { opacity: 0; }
.heroG--seal .heroG__shade { transition: opacity .35s; }
/* logo preview in the shell */
.hdr__logo .lgx { display: flex; align-items: center; height: 44px; }
.hdr__logo .lgx svg { height: 40px; width: auto; max-width: 230px; }
.hdr__logo .lgx .lgB { font-size: 30px; }
.lgx--ftr { display: flex; height: 40px; margin-bottom: 12px; }
.lgx--ftr svg { height: 36px; width: auto; max-width: 230px; }
.lgx--ftr .lgB { font-size: 26px; }
.lgB { display: inline-flex; align-items: baseline; font: 500 50px/1 "Unbounded", sans-serif; letter-spacing: -.03em; white-space: nowrap; }
.lgB b { display: inline-flex; align-items: baseline; font-weight: 800; margin-left: .12em; }
.lgB svg { width: .36em; height: .72em; margin: 0 .02em; align-self: center; transform: translateY(.04em); }
@media (max-width: 960px) { .hdr__logo .lgx svg { height: 32px; max-width: 170px; } .hdr__logo .lgx .lgB { font-size: 24px; } }

/* Footer bottom v2: one card — payments | trust badges, then a single copyright line */
.ftrX { display: grid; grid-template-columns: 1.4fr 1fr; margin-top: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.ftrX__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 22px 26px 24px; }
.ftrX__col + .ftrX__col { border-left: 1px solid var(--line); }
.ftrX__head { display: flex; align-items: center; gap: 12px; }
.ftrX__head svg { flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 11px; background: var(--card); border: 1px solid var(--line); color: var(--brand-ink); }
.ftrX__head b { display: block; font: 700 15px/1.25 var(--body); color: var(--ink); }
.ftrX__head span { display: block; font-size: 13px; color: var(--mute); }
.ftrX__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ftrX__pay .pi { background: var(--card); }
.ftrX__badges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ftrX__badges .tb { display: flex; align-items: center; justify-content: center; height: 50px; padding: 0 12px; border-radius: var(--radius-s); background: var(--card); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.ftrX__badges a.tb:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.ftrX__badges .tb img { height: 26px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: normal; opacity: 1; }
.ftrX__bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 20px 2px 0; font-size: 13px; color: var(--mute); }
.ftrX__links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ftrX__links a:hover { color: var(--ink); }
@media (max-width: 980px) {
  .ftrX { grid-template-columns: 1fr; }
  .ftrX__col + .ftrX__col { border-left: 0; border-top: 1px solid var(--line); }
  .ftrX__badges { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .ftrX__col { padding: 18px 16px 20px; gap: 14px; }
  .ftrX__badges { grid-template-columns: 1fr 1fr; }
  .ftrX__badges .tb { height: 46px; }
  .ftrX__badges .tb img { height: 22px; }
  .ftrX__bottom { flex-direction: column; align-items: flex-start; }
}
/* balance the two halves: equal columns, larger payment pills fill two rows like the 2×2 badges */
.ftrX { grid-template-columns: 1fr 1fr; }
.ftrX__pay .pi { height: 46px; min-width: 66px; padding: 0 14px; border-radius: var(--radius-s); }
.ftrX__pay .pi svg { height: 20px; }
.ftrX__pay .pi--pay svg { height: 16px; width: 16px; }
.ftrX__pay .pi--up svg { height: 24px; }
.ftrX__pay .pi__more { padding-left: 6px; }
@media (max-width: 640px) { .ftrX__pay .pi { height: 40px; min-width: 56px; padding: 0 10px; } .ftrX__pay .pi svg { height: 18px; } }