/*
 * Premium cards of the home page: "Built for the way you trade" (.ptiles / .ptile) and "What is inside" (.pfcards / .pfcard).
 * Loaded on the home page only. Icons: server/site/render/icons_premium.js (duotone, coloured from here). Motion: 200-280 ms, transform/opacity/shadow only,
 * switched off under prefers-reduced-motion (the site-wide rule below it also applies).
 */
.ptiles, .pfcards { --pi-soft: rgba(22, 119, 255, .18); --pi-acc: #1677ff; --pi-card: #fff; display: grid; gap: 18px; align-items: stretch; grid-auto-rows: 1fr; }
.ptiles { grid-template-columns: 1fr; }
.pfcards { grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 620px) { .ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pfcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .ptiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pfcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- shared card skin */
.ptile, .pfcard {
  position: relative; display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden; text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, #fff 0%, #f6faff 100%); border: 1px solid #d8e4f6; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(11, 31, 68, .05), 0 8px 22px rgba(11, 31, 68, .06);
  transition: transform .26s cubic-bezier(.2, .7, .2, 1), box-shadow .26s ease, border-color .26s ease, background-color .26s ease;
}
.ptile::before, .pfcard::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 3px; background: linear-gradient(90deg, var(--blue), var(--sky)); transform: scaleX(0); transform-origin: left center; transition: transform .28s ease; }
[dir="rtl"] .ptile::before, [dir="rtl"] .pfcard::before { transform-origin: right center; }
.ptile:hover, .pfcard:hover, .ptile:focus-visible, .pfcard:focus-visible { transform: translateY(-4px); border-color: rgba(22, 119, 255, .55); color: var(--ink); box-shadow: 0 2px 4px rgba(11, 31, 68, .06), 0 18px 40px rgba(22, 119, 255, .16); }
.ptile:hover::before, .pfcard:hover::before, .ptile:focus-visible::before, .pfcard:focus-visible::before { transform: scaleX(1); }
.ptile:focus-visible, .pfcard:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ptile:active, .pfcard:active { transform: translateY(-1px); }

/* the round arrow: one shape for both card types, it slides in the reading direction (and is mirrored in Arabic) */
.pgo { display: inline-flex; align-items: center; justify-content: center; inline-size: 34px; block-size: 34px; border-radius: 50%; background: #eaf2ff; color: var(--blue-600); flex: none; transition: background-color .24s ease, color .24s ease, transform .24s ease; }
.pgo .ico { inline-size: 18px; block-size: 18px; transition: transform .24s ease; }
[dir="rtl"] .pgo .ico { transform: scaleX(-1); }
.ptile:hover .pgo, .pfcard:hover .pgo, .ptile:focus-visible .pgo, .pfcard:focus-visible .pgo { background: var(--blue); color: #fff; }
.ptile:hover .pgo .ico, .pfcard:hover .pgo .ico, .ptile:focus-visible .pgo .ico, .pfcard:focus-visible .pgo .ico { transform: translateX(2px); }
[dir="rtl"] .ptile:hover .pgo .ico, [dir="rtl"] .pfcard:hover .pgo .ico, [dir="rtl"] .ptile:focus-visible .pgo .ico, [dir="rtl"] .pfcard:focus-visible .pgo .ico { transform: scaleX(-1) translateX(2px); }

/* ---------------------------------------------------------------- business-type cards */
.ptile { gap: 14px; padding: 24px 22px 20px; min-block-size: 214px; }
.ptile-ico { display: grid; place-items: center; inline-size: 68px; block-size: 68px; border-radius: 18px; color: var(--navy-800);
  background: linear-gradient(145deg, #f3f8ff, #dcebff); border: 1px solid #cfe1fb; box-shadow: inset 0 1px 0 #fff;
  transition: background .26s ease, color .26s ease, transform .26s cubic-bezier(.2, .7, .2, 1), border-color .26s ease; }
.ptile-ico .pi { inline-size: 44px; block-size: 44px; }
.ptile:hover .ptile-ico, .ptile:focus-visible .ptile-ico { background: linear-gradient(145deg, #1677ff, #0b4fb3); color: #fff; border-color: transparent; transform: translateY(-2px) scale(1.05); --pi-soft: rgba(255, 255, 255, .22); --pi-acc: #ffd978; --pi-card: #0f62d9; }
.ptile-body { display: grid; gap: 6px; flex: 1; align-content: start; min-inline-size: 0; }
.ptile-body strong { font-size: 1.1rem; line-height: 1.3; color: var(--navy-900); text-wrap: balance; overflow-wrap: anywhere; }
.ptile-body span { font-size: .92rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.ptile .pgo { align-self: flex-end; margin-block-start: -4px; }

/* ---------------------------------------------------------------- software feature cards */
.pfcard { gap: 10px; padding: 28px 28px 24px; min-block-size: 262px; }
.pfcard-ico { display: grid; place-items: center; inline-size: 72px; block-size: 72px; border-radius: 20px; margin-block-end: 8px; color: #fff;
  background: linear-gradient(145deg, #13294f, #0b1d3a); box-shadow: 0 10px 22px rgba(11, 29, 58, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
  --pi-soft: rgba(143, 194, 255, .24); --pi-acc: #e3bd5c; --pi-card: #13294f;
  transition: transform .26s cubic-bezier(.2, .7, .2, 1), box-shadow .26s ease, background .26s ease; }
.pfcard-ico .pi { inline-size: 44px; block-size: 44px; }
.pfcard:hover .pfcard-ico, .pfcard:focus-visible .pfcard-ico { transform: translateY(-3px) rotate(-3deg); background: linear-gradient(145deg, #1677ff, #0b4fb3); box-shadow: 0 14px 28px rgba(22, 119, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .25); --pi-card: #0f62d9; --pi-acc: #ffd978; }
[dir="rtl"] .pfcard:hover .pfcard-ico, [dir="rtl"] .pfcard:focus-visible .pfcard-ico { transform: translateY(-3px) rotate(3deg); }
.pfcard h3 { font-size: 1.28rem; line-height: 1.3; color: var(--navy-900); text-wrap: balance; overflow-wrap: anywhere; }
.pfcard p { margin: 0; flex: 1; font-size: .97rem; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.pfcard-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: 10px; padding-block-start: 14px; border-block-start: 1px solid #e3ecf9; font-weight: 700; color: var(--blue-600); }

@media (prefers-reduced-motion: reduce) {
  .ptile, .pfcard, .ptile::before, .pfcard::before, .ptile-ico, .pfcard-ico, .pgo, .pgo .ico { transition: none; }
  .ptile:hover, .pfcard:hover, .ptile:focus-visible, .pfcard:focus-visible, .ptile:hover .ptile-ico, .pfcard:hover .pfcard-ico, .ptile:focus-visible .ptile-ico, .pfcard:focus-visible .pfcard-ico { transform: none; }
  .ptile:hover .pgo .ico, .pfcard:hover .pgo .ico { transform: none; }
  [dir="rtl"] .ptile:hover .pgo .ico, [dir="rtl"] .pfcard:hover .pgo .ico { transform: scaleX(-1); }
}
@media (max-width: 619px) { .ptile { min-block-size: 0; } .pfcard { min-block-size: 0; padding: 24px 22px 20px; } }