/* /products and /products/{slug}. Builds on products-menu.css (tokens, icons, cards),
   which every page loads. Arabic gets products.rtl.css (tools/build-rtl-css.mjs). */

.pd {
  --acc: var(--pm-brand);
  --acc-ink: color-mix(in srgb, var(--acc) 72%, #0b1020);
  --acc-soft: color-mix(in srgb, var(--acc) 9%, #fff);
  --pd-sticky: 78px;
  font-family: Manrope, Inter, system-ui, sans-serif;
  color: var(--pm-ink);
  background: #fff;
  overflow-x: clip;
}
.pd--federation { --acc: #10a6d6; }
.pd--academy { --acc: #1f9d6b; }
.pd--tournaments { --acc: #e8930c; }
.pd--arena { --acc: #e5484d; }
.pd--connect { --acc: #3e63dd; }
.pd--ztream { --acc: #1e9fd8; }
.pd--zet-ai { --acc: #7c3aed; }
.pd--directory { --acc: #0e9f9a; }
.pd--forum { --acc: #8e4ec6; }
.pd--courtz { --acc: #5f9e0f; }
/* Courtz's visual is a real screen, not a device mock-up: frame it. */
.pd--courtz .pd-visual-img { border-radius: 14px; max-width: 600px; }
.pd--zet-ai .pd-visual-img { border-radius: 28px; max-width: 440px; }

.pd h1, .pd h2, .pd h3, .pd p, .pd ol, .pd ul, .pd figure { margin: 0; }
.pd ul, .pd ol { padding: 0; list-style: none; }
.pd a { text-decoration: none; }

.pd-wrap { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }

/* ---------------------------------------------------------------- buttons */

.pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: 700 15px/1.1 Manrope, sans-serif;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pd-btn:hover { transform: translateY(-1px); }
.pd-btn--primary { background: var(--pm-brand); color: #fff !important; box-shadow: 0 10px 24px -12px rgba(16, 166, 214, .8); }
.pd-btn--primary:hover { background: var(--pm-brand-deep); }
.pd-btn--ghost { background: #fff; border-color: #cfd8e3; color: var(--pm-ink) !important; }
.pd-btn--ghost:hover { border-color: var(--pm-ink); }
.pd-btn--sm { padding: 9px 16px; font-size: 13.5px; background: var(--pm-brand); color: #fff !important; }
.pd-btn--sm:hover { background: var(--pm-brand-deep); }
.pd-btn--light { background: #fff; color: var(--pm-navy) !important; }
.pd-btn--outline-light { border-color: rgba(255, 255, 255, .45); color: #fff !important; }
.pd-btn--outline-light:hover { border-color: #fff; }

/* ---------------------------------------------------------------- shared type */

.pd-kicker {
  font: 700 12.5px/1.2 Manrope, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pm-brand-deep);
}
.pd-h2 {
  margin-top: 10px !important;
  font: 700 clamp(28px, 3.4vw, 42px)/1.12 Manrope, sans-serif;
  letter-spacing: -.02em;
  color: var(--pm-ink);
  text-wrap: balance;
}
.pd-sub { margin-top: 14px !important; font: 400 17px/1.6 Manrope, sans-serif; color: var(--pm-text); text-wrap: pretty; }
.pd-sub a { color: var(--pm-brand-deep); font-weight: 700; }
.pd-lede { margin-top: 18px !important; max-width: 60ch; font: 400 clamp(16px, 1.4vw, 18.5px)/1.6 Manrope, sans-serif; color: var(--pm-text); text-wrap: pretty; }

.pd-sec { padding-block: clamp(56px, 8vw, 104px); scroll-margin-top: calc(var(--pd-sticky) + 64px); }
.pd-sec--soft { background: var(--pm-soft); }
.pd-sec--tight { padding-top: 0; }
.pd-sec-head { max-width: 760px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.pd-sec-head--start { margin: 0; text-align: start; }
.pd-more-link { margin-top: 32px !important; text-align: center; }
.pd-more-link a { font: 700 15px Manrope, sans-serif; color: var(--pm-brand-deep); }
.pd-more-link a:hover .pm-chev { translate: 3px 0; }

/* ---------------------------------------------------------------- hero */

.pd-hero {
  position: relative;
  padding-block: clamp(28px, 4vw, 56px) clamp(48px, 6vw, 88px);
  background:
    radial-gradient(55% 70% at 88% 18%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 70%),
    linear-gradient(180deg, #f4f9fd 0%, #fff 100%);
}
.pd-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.pd-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 13px/1.4 Manrope, sans-serif; color: var(--pm-muted); }
.pd-crumbs a { color: var(--pm-brand-deep); font-weight: 600; }
.pd-lockup { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.pd-lockup .pm-icon { width: 52px; height: 52px; border-radius: 14px; }
.pd-lockup .pm-icon svg { width: 28px; height: 28px; }
.pd-lockup .pm-lock small { font-size: 12.5px; }
.pd-lockup .pm-lock strong { font-size: 24px; }
.pd-lockup .pm-badge { margin-inline-start: 4px; align-self: center; }
.pd-lockup .pm-logo { height: 44px; max-width: 240px; }
.pd-eyebrow {
  margin-top: 26px !important;
  font: 700 13px/1.3 Manrope, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--acc-ink);
}
.pd-title {
  margin-top: 10px !important;
  font: 700 clamp(34px, 4.8vw, 58px)/1.05 Manrope, sans-serif;
  letter-spacing: -.03em;
  color: var(--pm-ink);
  text-wrap: balance;
}
.pd-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pd-stats { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 40px !important; }
.pd-stats li { display: flex; flex-direction: column; gap: 4px; padding-inline-start: 16px; border-inline-start: 2px solid color-mix(in srgb, var(--acc) 45%, #fff); max-width: 180px; }
.pd-stats strong { font: 800 26px/1 Manrope, sans-serif; letter-spacing: -.02em; color: var(--pm-ink); }
.pd-stats span { font: 500 13px/1.35 Manrope, sans-serif; color: var(--pm-text); }

/* visual */
.pd-visual { position: relative; display: grid; place-items: center; min-height: 340px; }
.pd-visual-glow {
  position: absolute;
  inset: 6% 4%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--acc) 30%, transparent), transparent 68%);
  filter: blur(18px);
}
.pd-visual-img { position: relative; width: 100%; max-width: 560px; height: auto; filter: drop-shadow(0 40px 50px rgba(12, 15, 44, .28)); }

.pd-app {
  position: relative;
  width: 100%;
  max-width: 540px;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 44px 80px -34px rgba(12, 15, 44, .4), 0 0 0 1px rgba(12, 15, 44, .06);
  font-family: Manrope, sans-serif;
}
.pd-app-bar { display: flex; align-items: center; gap: 6px; height: 40px; padding-inline: 14px; background: #f3f6fa; border-bottom: 1px solid var(--pm-line); }
.pd-app-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.pd-app-bar i:nth-child(2) { background: #febc2e; }
.pd-app-bar i:nth-child(3) { background: #28c840; }
.pd-app-bar span { margin-inline-start: 10px; font: 600 12px Manrope, sans-serif; color: var(--pm-muted); }
.pd-app-body { display: grid; grid-template-columns: 150px 1fr; min-height: 300px; }
.pd-app-nav { padding: 14px 10px !important; background: #fafcff; border-inline-end: 1px solid var(--pm-line); display: grid; align-content: start; gap: 4px; }
.pd-app-nav li { padding: 7px 10px; border-radius: 8px; font: 600 11.5px/1.3 Manrope, sans-serif; color: var(--pm-text); }
.pd-app-nav li:first-child { background: var(--acc-soft); color: var(--acc-ink); }
.pd-app-main { display: grid; gap: 14px; align-content: start; padding: 16px; }
.pd-app-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pd-app-kpis div { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--pm-line); border-radius: 10px; }
.pd-app-kpis strong { font: 800 16px/1 Manrope, sans-serif; color: var(--pm-ink); }
.pd-app-kpis span { font: 500 10.5px/1.3 Manrope, sans-serif; color: var(--pm-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pd-app-chart { display: flex; align-items: flex-end; gap: 6px; height: 104px; padding: 10px; border: 1px solid var(--pm-line); border-radius: 10px; }
.pd-app-chart span { flex: 1; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, var(--acc), color-mix(in srgb, var(--acc) 35%, #fff)); }
.pd-app-rows { display: grid; gap: 8px; }
.pd-app-rows span { height: 10px; border-radius: 5px; background: #eef2f7; }
.pd-app-rows span:nth-child(2) { width: 82%; }
.pd-app-rows span:nth-child(3) { width: 64%; }

.pd-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 44px -18px rgba(12, 15, 44, .4), 0 0 0 1px rgba(12, 15, 44, .05);
  font-family: Manrope, sans-serif;
  animation: pd-float 6s ease-in-out infinite;
}
@keyframes pd-float { 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .pd-float { animation: none; } }
.pd-float .pm-icon { width: 34px; height: 34px; border-radius: 10px; }
.pd-float small { display: block; font: 700 10.5px/1 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--pm-ai-a); margin-bottom: 3px; }
.pd-float strong { font: 700 13.5px/1.2 Manrope, sans-serif; color: var(--pm-ink); }
.pd-float--ai { inset-inline-start: -2%; bottom: 8%; max-width: 280px; }
.pd-app ~ .pd-float--ai { bottom: -6%; }
.pd-float--stat { inset-inline-end: 0; top: 6%; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; animation-delay: -3s; max-width: 200px; }
.pd-float--stat strong { font: 800 22px/1 Manrope, sans-serif; color: var(--acc-ink); }
.pd-float--stat span { font: 500 12px/1.3 Manrope, sans-serif; color: var(--pm-text); }

/* ---------------------------------------------------------------- sub-navigation */

.pd-subnav {
  position: sticky;
  top: var(--pd-sticky);
  z-index: 20;
  background: rgba(255, 255, 255, .94);
  border-block: 1px solid var(--pm-line);
  backdrop-filter: saturate(1.4) blur(10px);
}
.pd-subnav-inner { display: flex; align-items: center; gap: 20px; min-height: 58px; }
.pd-subnav-name { font: 800 15px/1 Manrope, sans-serif; white-space: nowrap; }
.pd-subnav ul { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.pd-subnav ul::-webkit-scrollbar { display: none; }
.pd-subnav ul a {
  display: block;
  padding: 8px 13px;
  border-radius: 999px;
  font: 600 13.5px/1 Manrope, sans-serif;
  color: var(--pm-text);
  white-space: nowrap;
}
.pd-subnav ul a:hover { color: var(--pm-ink); background: var(--pm-soft); }
.pd-subnav ul a.is-active { color: var(--pm-ink); background: var(--acc-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 25%, transparent); }
.pd-subnav-ai span { color: var(--pm-ai-a); }
.pd-subnav .pd-btn { margin-inline-start: auto; }

/* ---------------------------------------------------------------- why */

.pd-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pd-benefit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--pm-line);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
}
.pd-num { font: 800 13px/1 Manrope, sans-serif; letter-spacing: .08em; color: var(--acc-ink); }
.pd-benefit h3 { font: 700 20px/1.25 Manrope, sans-serif; letter-spacing: -.01em; }
.pd-benefit p { font: 400 15.5px/1.6 Manrope, sans-serif; color: var(--pm-text); }

/* ---------------------------------------------------------------- USP */

.pd-usp { background: linear-gradient(135deg, var(--acc-soft) 0%, #fff 62%); }
.pd-usp-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.pd-usp-grid .pd-sec-head { position: sticky; top: calc(var(--pd-sticky) + 90px); }
.pd-usp-list { display: grid; gap: 14px; }
.pd-usp-list li {
  display: flex;
  gap: 18px;
  padding: 24px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(12, 15, 44, .04), 0 18px 40px -30px rgba(12, 15, 44, .35);
  border: 1px solid var(--pm-line);
}
.pd-usp-mark { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--acc); color: #fff; }
.pd-usp-list h3 { font: 700 19px/1.3 Manrope, sans-serif; }
.pd-usp-list p { margin-top: 6px !important; font: 400 15.5px/1.6 Manrope, sans-serif; color: var(--pm-text); }

/* ---------------------------------------------------------------- features */

.pd-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pd-feature {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border: 1px solid var(--pm-line);
  border-radius: 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pd-feature:hover { border-color: color-mix(in srgb, var(--acc) 35%, #fff); box-shadow: 0 18px 40px -30px rgba(12, 15, 44, .45); }
.pd-feature-dot { width: 30px; height: 4px; border-radius: 2px; background: var(--acc); margin-bottom: 6px; }
.pd-feature h3 { font: 700 17.5px/1.3 Manrope, sans-serif; }
.pd-feature p { font: 400 15px/1.6 Manrope, sans-serif; color: var(--pm-text); }

/* ---------------------------------------------------------------- Zet AI */

.pd-ai {
  position: relative;
  padding-block: clamp(64px, 9vw, 112px);
  scroll-margin-top: calc(var(--pd-sticky) + 64px);
  background:
    radial-gradient(45% 60% at 92% 10%, rgba(6, 182, 212, .32), transparent 65%),
    radial-gradient(45% 60% at 0% 100%, rgba(124, 58, 237, .4), transparent 65%),
    #0b0e2a;
  color: #fff;
}
.pd-ai-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.pd-ai-kicker { font: 700 12.5px/1.2 Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #a5f3fc; }
.pd-ai .pd-h2 { color: #fff; }
.pd-ai-lede { margin-top: 16px !important; font: 400 17px/1.6 Manrope, sans-serif; color: rgba(255, 255, 255, .78); max-width: 58ch; }
.pd-ai-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.pd-ai-cap { padding: 18px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.pd-ai-cap h3 { font: 700 15.5px/1.3 Manrope, sans-serif; color: #fff; }
.pd-ai-cap p { margin-top: 6px !important; font: 400 14px/1.55 Manrope, sans-serif; color: rgba(255, 255, 255, .7); }
.pd-ai-link { display: inline-flex; gap: 6px; margin-top: 26px; font: 700 15px Manrope, sans-serif; color: #fff !important; border-bottom: 1.5px solid rgba(255, 255, 255, .4); padding-bottom: 3px; }
.pd-ai-link:hover { border-color: #fff; }

.pd-chat {
  border-radius: 22px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .7);
  overflow: hidden;
}
.pd-chat-bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.pd-chat-avatar { width: 36px; height: 36px; border-radius: 11px; }
.pd-chat-bar strong { display: block; font: 700 14.5px/1.2 Manrope, sans-serif; }
.pd-chat-bar small { display: block; font: 500 12px/1.3 Manrope, sans-serif; color: rgba(255, 255, 255, .6); }
.pd-chat-live { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6ee7b7; }
.pd-chat-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .2); }
.pd-chat-body { display: grid; gap: 12px; padding: 22px 18px; }
.pd-bubble { max-width: 88%; padding: 12px 16px; border-radius: 18px; font: 500 14.5px/1.55 Manrope, sans-serif; }
.pd-bubble--you { justify-self: end; background: var(--pm-brand); color: #fff; border-end-end-radius: 5px; }
.pd-bubble--ai { justify-self: start; background: #fff; color: var(--pm-ink); border-end-start-radius: 5px; }
.pd-chat-input { display: flex; align-items: center; justify-content: space-between; margin: 0 18px 18px; padding: 10px 10px 10px 16px; border-radius: 14px; background: rgba(255, 255, 255, .08); font: 500 14px Manrope, sans-serif; color: rgba(255, 255, 255, .5); }
.pd-chat-send { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--pm-ai-a), var(--pm-ai-b)); color: #fff; font-weight: 800; }

/* ---------------------------------------------------------------- how it works */

.pd-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: step; }
.pd-steps li { position: relative; display: flex; flex-direction: column; gap: 10px; }
.pd-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 23px;
  inset-inline: 62px -14px;
  border-top: 2px dashed color-mix(in srgb, var(--acc) 40%, #fff);
}
.pd-step-num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--acc);
  background: #fff;
  font: 800 18px/1 Manrope, sans-serif;
  color: var(--acc-ink);
  margin-bottom: 8px;
}
.pd-steps h3 { font: 700 19px/1.3 Manrope, sans-serif; }
.pd-steps p { font: 400 15.5px/1.6 Manrope, sans-serif; color: var(--pm-text); }
.pd-audience { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 56px; }
.pd-audience-label { font: 700 12.5px/1 Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--pm-muted); margin-inline-end: 6px !important; }
.pd-audience ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pd-audience li { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--pm-line); background: #fff; font: 600 14px/1.2 Manrope, sans-serif; }

/* ---------------------------------------------------------------- related, FAQ, CTA */

.pd-related { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 0; }
.pd-related .pm-card { background: #fff; }

.pd-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); }
.pd-faq details { border-bottom: 1px solid var(--pm-line); }
.pd-faq details:first-child { border-top: 1px solid var(--pm-line); }
.pd-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  font: 700 17px/1.4 Manrope, sans-serif;
  cursor: pointer;
  list-style: none;
}
.pd-faq summary::-webkit-details-marker { display: none; }
.pd-faq summary::after { content: "+"; flex: none; font: 500 24px/1 Manrope, sans-serif; color: var(--pm-brand-deep); transition: rotate .2s ease; }
.pd-faq details[open] summary::after { rotate: 45deg; }
.pd-faq details p { padding-bottom: 22px; font: 400 15.5px/1.65 Manrope, sans-serif; color: var(--pm-text); max-width: 68ch; }

.pd-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(28px, 5vw, 56px);
  border-radius: 28px;
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(16, 166, 214, .6), transparent 60%),
    radial-gradient(50% 120% at 0% 100%, rgba(124, 58, 237, .45), transparent 60%),
    var(--pm-navy);
  color: #fff;
}
.pd-cta .pd-h2 { margin-top: 0 !important; color: #fff; }
.pd-cta p { margin-top: 10px !important; max-width: 56ch; font: 400 17px/1.6 Manrope, sans-serif; color: rgba(255, 255, 255, .8); }
.pd-cta .pd-ctas { margin-top: 0; flex: none; }

/* ---------------------------------------------------------------- /products */

.pi-hero {
  padding-block: clamp(40px, 6vw, 80px) 28px;
  text-align: center;
  background:
    radial-gradient(40% 60% at 15% 0%, rgba(16, 166, 214, .14), transparent 70%),
    radial-gradient(40% 60% at 85% 10%, rgba(124, 58, 237, .1), transparent 70%),
    linear-gradient(180deg, #f4f9fd, #fff);
}
.pi-title {
  margin-top: 12px !important;
  font: 700 clamp(36px, 5.4vw, 66px)/1.04 Manrope, sans-serif;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.pi-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--pm-brand), var(--pm-ai-a));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pi-hero .pd-lede { margin-inline: auto; }
.pi-tools { max-width: 900px; margin: 34px auto 0; }
.pi-search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  margin: 0 auto;
  max-width: 620px;
  padding-inline: 22px;
  border-radius: 999px;
  border: 1px solid #d7dde7;
  background: #fff;
  color: var(--pm-muted);
  box-shadow: 0 20px 40px -28px rgba(12, 15, 44, .4);
}
.pi-search:focus-within { border-color: var(--pm-brand); box-shadow: 0 0 0 4px rgba(16, 166, 214, .14), 0 20px 40px -28px rgba(12, 15, 44, .4); }
.pi-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 16px Manrope, sans-serif; color: var(--pm-ink); }
.pi-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.pi-chip {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--pm-line);
  background: #fff;
  font: 600 14px/1.2 Manrope, sans-serif;
  color: var(--pm-ink);
  cursor: pointer;
}
.pi-chip:hover { border-color: #b8c3d3; }
.pi-chip[aria-pressed="true"] { background: var(--pm-navy); border-color: var(--pm-navy); color: #fff; }
.pi-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 28px !important; font: 500 14px Manrope, sans-serif; color: var(--pm-text); }
.pi-facts strong { color: var(--pm-ink); font-weight: 800; }

.pi-catalogue { padding-bottom: clamp(56px, 8vw, 96px); }
.pi-cat { margin-top: 52px; scroll-margin-top: 120px; }
.pi-cat[hidden] { display: none; }
.pi-cat-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--pm-line); }
.pi-cat-title { font: 700 24px/1.2 Manrope, sans-serif; letter-spacing: -.01em; }
.pi-cat-head p { font: 400 15px/1.5 Manrope, sans-serif; color: var(--pm-text); }
.pi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 22px; }
.pi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--pm-line);
  border-radius: 20px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pi-card:hover, .pi-card:focus-within { border-color: color-mix(in srgb, var(--acc) 35%, #fff); box-shadow: 0 24px 50px -32px rgba(12, 15, 44, .45); transform: translateY(-3px); }
.pi-card[hidden] { display: none; }
.pi-card .pm-icon { width: 46px; height: 46px; border-radius: 13px; }
.pi-card .pm-lock strong { font-size: 21px; }
.pi-card .pm-logo { height: 36px; }
.pi-tagline { margin-top: 18px !important; font: 700 12.5px/1.3 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--acc-ink); }
.pi-summary { margin-top: 8px !important; font: 400 15px/1.6 Manrope, sans-serif; color: var(--pm-text); }
.pi-ai {
  align-self: flex-start;
  display: inline-flex;
  gap: 6px;
  margin: 16px 0 20px !important;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f4efff;
  font: 600 13px/1.3 Manrope, sans-serif;
  color: #6d28d9;
}
.pi-card .pm-card-links { padding-top: 16px; border-top: 1px solid var(--pm-line); }
.pi-empty { margin-top: 40px !important; text-align: center; font: 500 16px Manrope, sans-serif; color: var(--pm-text); }
.pi-empty a { color: var(--pm-brand-deep); font-weight: 700; }

.pi-orbit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pi-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 118px;
  padding: 16px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff !important;
  text-align: center;
  transition: background .15s ease, border-color .15s ease;
}
.pi-node:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
.pi-node strong { font: 700 14.5px/1.2 Manrope, sans-serif; }
.pi-node .pm-icon { background: #fff; }
.pi-node--core {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: 14px;
  min-height: 84px;
  background: linear-gradient(135deg, var(--pm-ai-a), var(--pm-ai-b));
  border-color: transparent;
  box-shadow: 0 0 0 6px rgba(124, 58, 237, .18), 0 24px 60px -20px rgba(6, 182, 212, .7);
}
.pi-node--core:hover { background: linear-gradient(135deg, #6d28d9, #0891b2); }
.pi-node--core .pm-icon { background: rgba(255, 255, 255, .2); box-shadow: none; }
.pi-node--core small { font: 600 12px/1.2 Manrope, sans-serif; color: rgba(255, 255, 255, .85); }

.pi-suites { margin-top: 0; }
.pi-audiences { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.pi-audience { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--pm-line); }
.pi-audience h3 { font: 700 18px/1.3 Manrope, sans-serif; }
.pi-audience p { font: 400 14.5px/1.6 Manrope, sans-serif; color: var(--pm-text); }
.pi-audience ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto !important; padding-top: 8px !important; }
.pi-audience a { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 4px; border-radius: 999px; border: 1px solid var(--pm-line); background: var(--pm-soft); font: 600 13px/1 Manrope, sans-serif; color: var(--pm-ink) !important; }
.pi-audience a:hover { border-color: #b8c3d3; background: #fff; }
.pi-audience .pm-icon { width: 24px; height: 24px; border-radius: 50%; }
.pi-audience .pm-icon svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 991.98px) {
  .pd-hero-grid, .pd-ai-grid, .pd-usp-grid, .pd-faq-grid { grid-template-columns: 1fr; }
  .pd-usp-grid .pd-sec-head { position: static; }
  .pd-visual { min-height: 0; max-width: 560px; margin-inline: auto; width: 100%; }
  .pd-benefits, .pd-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-subnav-name { display: none; }
  .pd-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 767.98px) {
  .pd { --pd-sticky: 70px; }
  .pd-benefits, .pd-features, .pd-steps { grid-template-columns: 1fr; }
  .pd-steps li:not(:last-child)::after { display: none; }
  .pd-ai-caps { grid-template-columns: 1fr; }
  .pd-subnav .pd-btn { display: none; }
  .pd-subnav-inner { min-height: 52px; }
  .pd-stats { gap: 16px 22px; }
  .pd-stats li { max-width: 46%; }
  .pd-ctas .pd-btn { flex: 1 1 auto; }
  .pd-app-body { grid-template-columns: 1fr; }
  .pd-app-nav { display: none !important; }
  .pd-float--ai { inset-inline-start: 0; bottom: -4%; max-width: 74%; }
  .pd-float--stat { inset-inline-end: 0; top: 0; }
  .pi-node { min-height: 96px; padding: 12px 6px; }
  .pi-node strong { font-size: 12.5px; }
  .pi-grid { grid-template-columns: 1fr; }
}

/* product logos in rows, chips and the Zet AI grid (see _ProductMark) */
.pi-node--logo { gap: 0; }
.pi-node--logo .pm-mark-logo { height: 30px; max-width: 88%; }
.pi-audience .pm-mark-logo { height: 18px; }
.pi-audience a:has(.pm-mark-logo) { padding: 6px 12px; }
@media (max-width: 767.98px) { .pi-node--logo .pm-mark-logo { height: 22px; } }

.pd-ai-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; }
.pd-ai-ctas .pd-ai-link { margin-top: 0; }
.pd-btn--sm-light { padding: 10px 18px; font-size: 14px; }

/* ---------------------------------------------------------------- /ecosystem */

.eco-ctas { justify-content: center; }
.eco-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eco-flows { display: grid; gap: 12px; margin-top: 26px !important; }
.eco-flows li { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.eco-flow-pair { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eco-flow-pair a { display: inline-flex; align-items: center; gap: 8px; color: #fff !important; font: 700 14px/1.2 Manrope, sans-serif; }
.eco-flow-pair .pm-mark-logo { height: 22px; }
.eco-flow-pair .pm-icon { width: 26px; height: 26px; border-radius: 8px; background: #fff; }
.eco-flow-pair .pm-icon svg { width: 15px; height: 15px; }
.eco-flow-arrow { color: #a5f3fc; font-weight: 800; }
[dir="rtl"] .eco-flow-arrow { display: inline-block; transform: scaleX(-1); }
.eco-flow-text { font: 400 14.5px/1.55 Manrope, sans-serif; color: rgba(255, 255, 255, .78); }
.eco-core { background: linear-gradient(135deg, #f59e0b, #10a6d6); box-shadow: 0 0 0 6px rgba(16, 166, 214, .18), 0 24px 60px -20px rgba(250, 172, 32, .6); }
.eco-core:hover { background: linear-gradient(135deg, #d97706, #0b7fa6); }
.eco-core-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .2); font: 800 14px/1 Manrope, sans-serif; color: #fff; }

.eco-journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
.eco-journey li { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--pm-line); border-radius: 18px; background: #fff; }
.eco-journey .pd-step-num { margin-bottom: 0; width: 40px; height: 40px; font-size: 16px; border-color: var(--pm-brand); color: var(--pm-brand-deep); }
.eco-journey-body { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.eco-journey-body p { font: 500 15px/1.55 Manrope, sans-serif; color: var(--pm-ink); }
.eco-journey-product { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 10px; border-radius: 10px; background: var(--pm-soft); font: 700 13px/1.2 Manrope, sans-serif; color: var(--pm-ink) !important; }
.eco-journey-product .pm-mark-logo { height: 20px; }
.eco-journey-product .pm-icon { width: 24px; height: 24px; border-radius: 7px; }
.eco-journey-product .pm-icon svg { width: 14px; height: 14px; }
.eco-people .pi-audience { scroll-margin-top: 120px; }
.eco-people .pi-audience:target { border-color: var(--pm-brand); box-shadow: 0 0 0 3px rgba(16, 166, 214, .15); }

@media (max-width: 991.98px) {
  .eco-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eco-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .eco-pillars, .eco-journey { grid-template-columns: 1fr; }
}
.pd-sec--tight-top { padding-top: clamp(40px, 5vw, 64px); padding-bottom: 0; }
.pi-eco {
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 24px 40px; align-items: center;
  padding: clamp(24px, 4vw, 44px); border-radius: 24px; border: 1px solid var(--pm-line);
  background: radial-gradient(60% 120% at 100% 0%, rgba(250, 172, 32, .14), transparent 60%), radial-gradient(60% 120% at 0% 100%, rgba(16, 166, 214, .12), transparent 60%), #fff;
}
.pi-eco .pd-ctas { margin-top: 0; }
@media (max-width: 767.98px) { .pi-eco { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- /capabilities: platform section */

.cap-platform { background: #fff; }
.cap-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 8px; }
.cap-group { margin-top: 44px; }
.cap-group[hidden] { display: none; }
.cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.cap-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px;
  border: 1px solid var(--pm-line); border-radius: 18px; background: linear-gradient(180deg, #fff, #fbfcfe);
  scroll-margin-top: 120px;
}
.cap-card .pm-badge { position: absolute; top: 18px; inset-inline-end: 18px; }
.cap-card h4 { margin: 0; padding-inline-end: 56px; font: 700 18px/1.3 Manrope, sans-serif; color: var(--pm-ink); }
.cap-card p { font: 400 15px/1.6 Manrope, sans-serif; color: var(--pm-text); }
.cap-card--ai { background: linear-gradient(180deg, #faf7ff, #fff); border-color: #ebe2fd; }
.cap-products { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto !important; padding-top: 8px !important; }
.cap-products a { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--pm-line); background: #fff; font: 600 13px/1 Manrope, sans-serif; color: var(--pm-ink) !important; }
.cap-products a:hover { border-color: #bfe6f3; }
.cap-products .pm-mark-logo { height: 20px; }
.cap-products .pm-icon { width: 22px; height: 22px; border-radius: 6px; }
.cap-products .pm-icon svg { width: 13px; height: 13px; }
.cap-eco { margin-top: 56px; }
@media (max-width: 991.98px) { .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .cap-grid { grid-template-columns: 1fr; } }

/* positioning: Zeetius · The Language of Sports → digital infrastructure → ecosystem → promise */
.eco-tagline em { font-style: normal; color: var(--pm-ink); }
.eco-enables { margin-top: 10px !important; font: 600 clamp(18px, 2vw, 24px)/1.3 Manrope, sans-serif; color: var(--pm-brand-deep); }
.eco-ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 980px; margin: 30px auto 0 !important; border: 1px solid var(--pm-line); border-radius: 18px; background: #fff; overflow: hidden; text-align: start; }
.eco-ladder li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; }
.eco-ladder li + li { border-inline-start: 1px solid var(--pm-line); }
.eco-ladder li:last-child { background: linear-gradient(135deg, #fff7e6, #e9f7fc); }
.eco-ladder span { font: 700 11.5px/1.2 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--pm-muted); }
.eco-ladder strong { font: 700 16.5px/1.35 Manrope, sans-serif; color: var(--pm-ink); }
.eco-promise { margin-top: 10px !important; font: 800 18px/1.4 Manrope, sans-serif; color: var(--pm-ink); }
.eco-cta-promise { margin: 0 0 8px !important; font: 700 12.5px/1.2 Manrope, sans-serif !important; letter-spacing: .08em; text-transform: uppercase; color: #fde68a !important; }
@media (max-width: 767.98px) {
  .eco-ladder { grid-template-columns: 1fr; }
  .eco-ladder li + li { border-inline-start: 0; border-top: 1px solid var(--pm-line); }
}

/* ================================================================ /products, redesigned
   px-hero (copy + product constellation) · px-proof (credibility) · px-caps (what the
   platform does) · px-toolbar (sticky search/filter) · px-card (product cards). */

.px-hero {
  position: relative;
  padding-block: clamp(36px, 5vw, 72px) clamp(40px, 5vw, 72px);
  background:
    radial-gradient(45% 70% at 85% 30%, rgba(16, 166, 214, .16), transparent 70%),
    radial-gradient(35% 60% at 70% 90%, rgba(124, 58, 237, .10), transparent 70%),
    radial-gradient(40% 60% at 0% 0%, rgba(250, 172, 32, .10), transparent 70%),
    linear-gradient(180deg, #f4f9fd, #fff);
  overflow: hidden;
}
.px-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.px-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--pm-line); font: 700 12.5px/1 Manrope, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--pm-brand-deep); box-shadow: 0 6px 18px -12px rgba(12, 15, 44, .35); }
.px-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); }
.px-title { margin-top: 18px !important; text-align: start; }
.px-hero .pd-lede { margin-inline: 0; }
.px-facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 12px 30px; margin-top: 34px !important; }
.px-facts li { display: flex; flex-direction: column; gap: 4px; padding-inline-start: 14px; border-inline-start: 2px solid #bfe6f3; }
.px-facts strong { font: 800 28px/1 Manrope, sans-serif; letter-spacing: -.02em; color: var(--pm-ink); }
.px-facts span { font: 500 13px/1.3 Manrope, sans-serif; color: var(--pm-text); }

/* the constellation: every product around Zet AI. Geometry, not reading direction: kept
   as-is in the Arabic stylesheet. */
/*rtl:begin:ignore*/
.px-art { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1; margin-inline: auto; container-type: inline-size; --r: 40cqw; }
.px-orbit { position: absolute; border-radius: 50%; }
.px-orbit--outer { inset: 9%; border: 1.5px dashed rgba(16, 166, 214, .35); animation: px-spin 90s linear infinite; }
.px-orbit--inner { inset: 30%; border: 1.5px dashed rgba(124, 58, 237, .25); animation: px-spin 60s linear infinite reverse; }
@keyframes px-spin { to { rotate: 360deg; } }
.px-core {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 22px; border-radius: 24px;
  background: #fff; box-shadow: 0 0 0 8px rgba(124, 58, 237, .08), 0 30px 60px -24px rgba(12, 15, 44, .45); text-align: center;
}
.px-core .pm-icon { width: 64px; height: 64px; border-radius: 18px; }
.px-core strong { font: 800 18px/1.1 Manrope, sans-serif; color: var(--pm-ink); }
.px-core small { font: 600 12px/1.2 Manrope, sans-serif; color: var(--pm-ai-a); }
/* each product sits on a circle: a zero-size anchor at the centre, its card pushed out by
   --r along the angle for its index, then turned back upright and centred on that point */
.px-planet { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.px-planet-inner {
  --a: calc(var(--i) / var(--n) * 360deg - 90deg);
  position: absolute; top: 0; left: 0;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 14px; white-space: nowrap;
  background: #fff; border: 1px solid var(--pm-line); box-shadow: 0 16px 30px -18px rgba(12, 15, 44, .45);
  font: 700 13px/1.1 Manrope, sans-serif; color: var(--pm-ink);
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) translate(-50%, -50%);
  transform-origin: 0 0;
}
.px-planet-inner .pm-mark-logo { height: 24px; }
.px-planet-inner .pm-icon { width: 26px; height: 26px; border-radius: 8px; }
.px-planet-inner .pm-icon svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .px-orbit { animation: none; } }
/*rtl:end:ignore*/

/* credibility */
.px-proof {
  position: relative; padding-block: clamp(48px, 6vw, 80px); color: #fff; overflow: hidden;
  background:
    radial-gradient(40% 80% at 100% 0%, rgba(16, 166, 214, .35), transparent 65%),
    radial-gradient(40% 80% at 0% 100%, rgba(250, 172, 32, .22), transparent 65%),
    #0b0e2a;
}
.px-proof-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 48px; align-items: end; }
.px-proof-kicker { grid-column: 1 / -1; font: 700 12.5px/1 Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #fde68a; }
.px-proof .pd-h2 { color: #fff; margin-top: 0 !important; }
.px-proof-text { font: 400 17px/1.6 Manrope, sans-serif; color: rgba(255, 255, 255, .78); }
.px-proof-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 36px !important; }
.px-proof-stats li { display: flex; flex-direction: column; gap: 8px; padding: 22px 18px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.px-proof-stats strong {
  font: 800 clamp(30px, 3.2vw, 44px)/1 Manrope, sans-serif; letter-spacing: -.03em;
  background: linear-gradient(90deg, #fff, #a5f3fc); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.px-proof-stats span { font: 600 13.5px/1.3 Manrope, sans-serif; letter-spacing: .02em; color: rgba(255, 255, 255, .72); }
.px-proof-logos-title { margin-top: 40px !important; font: 700 12px/1 Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.px-logos { margin-top: 16px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.px-logos-track { display: flex; gap: 14px; width: max-content; animation: px-marquee 50s linear infinite; }
.px-logos:hover .px-logos-track { animation-play-state: paused; }
.px-logos-track li { display: grid; place-items: center; width: 132px; height: 76px; padding: 12px; border-radius: 14px; background: #fff; }
.px-logos-track img { max-width: 100%; max-height: 100%; object-fit: contain; }
@keyframes px-marquee { to { translate: -50% 0; } }
[dir="rtl"] .px-logos-track { animation-name: px-marquee-rtl; }
@keyframes px-marquee-rtl { to { translate: 50% 0; } }
@media (prefers-reduced-motion: reduce) { .px-logos-track { animation: none; flex-wrap: wrap; width: auto; } .px-logos-track li[aria-hidden] { display: none; } }

/* what the platform does */
.px-cap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.px-cap { --c: var(--pm-brand); display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; border: 1px solid var(--pm-line); border-top: 4px solid var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 6%, #fff), #fff 40%); }
.px-cap--ai { --c: #7c3aed; }
.px-cap--compete { --c: #e5484d; }
.px-cap--run { --c: #10a6d6; }
.px-cap--reach { --c: #e8930c; }
.px-cap-num { font: 800 13px/1 Manrope, sans-serif; letter-spacing: .08em; color: var(--c); }
.px-cap h3 { font: 700 19px/1.25 Manrope, sans-serif; }
.px-cap > p { font: 400 14.5px/1.55 Manrope, sans-serif; color: var(--pm-text); }
.px-cap ul { display: grid; gap: 8px; margin-top: 6px !important; }
.px-cap a { display: flex; align-items: flex-start; gap: 10px; font: 600 14.5px/1.35 Manrope, sans-serif; color: var(--pm-ink) !important; }
.px-cap a:hover { color: var(--c) !important; }
.px-check { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: color-mix(in srgb, var(--c, var(--pm-brand)) 14%, #fff); position: relative; }
.px-check::after { content: ""; position: absolute; left: 5px; top: 3.5px; width: 5px; height: 8.5px; border: solid var(--c, var(--pm-brand)); border-width: 0 2px 2px 0; rotate: 45deg; }

/* sticky search + filters */
.px-toolbar { position: sticky; top: var(--pd-sticky); z-index: 15; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(10px); border-block: 1px solid var(--pm-line); scroll-margin-top: var(--pd-sticky); }
.px-toolbar-inner { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.px-search { flex: 0 0 300px; height: 46px; margin: 0; box-shadow: none; }
.px-chips { flex: 1; flex-wrap: nowrap; justify-content: flex-start; margin: 0; overflow-x: auto; scrollbar-width: none; padding-block: 4px; }
.px-chips::-webkit-scrollbar { display: none; }
.px-chips .pi-chip { white-space: nowrap; }

/* product cards */
.px-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.px-card { padding: 0; overflow: hidden; }
.px-card-media {
  position: relative; display: grid; place-items: center; height: 200px; padding: 18px;
  background: radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--acc) 22%, #fff), color-mix(in srgb, var(--acc) 6%, #fff) 70%);
  border-bottom: 1px solid var(--pm-line);
}
.px-card-media img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 16px 22px rgba(12, 15, 44, .22)); transition: transform .3s ease; }
.px-card:hover .px-card-media img { transform: translateY(-4px) scale(1.02); }
.px-card-mark .pm-icon { width: 84px; height: 84px; border-radius: 24px; box-shadow: 0 20px 40px -20px rgba(12, 15, 44, .45); }
.px-card-mark .pm-icon svg { width: 44px; height: 44px; }
.px-card-stat { position: absolute; inset-inline-start: 14px; bottom: 14px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 20px -12px rgba(12, 15, 44, .4); font: 600 12px/1.2 Manrope, sans-serif; color: var(--pm-text); max-width: calc(100% - 28px); }
.px-card-stat strong { color: var(--acc-ink); font-weight: 800; }
.px-card-new { position: absolute; top: 14px; inset-inline-end: 14px; margin: 0; }
.px-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 22px; }
.px-card-brand { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.px-card-brand .pm-logo { height: 34px; }
.px-card .pi-tagline { margin-top: 14px !important; }
.px-feats { display: grid; gap: 8px; margin: 14px 0 0 !important; }
.px-feats li { --c: var(--acc); display: flex; gap: 10px; align-items: flex-start; font: 600 14px/1.35 Manrope, sans-serif; color: var(--pm-ink); }
.px-card .pi-ai { margin: 16px 0 18px !important; }

@media (max-width: 1199.98px) {
  .px-proof-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .px-cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .px-hero-grid { grid-template-columns: 1fr; }
  .px-art { max-width: 460px; }
  .px-proof-head { grid-template-columns: 1fr; }
  .px-toolbar-inner { flex-direction: column; align-items: stretch; gap: 10px; padding-block: 10px; }
  .px-search { flex-basis: auto; }
}
@media (max-width: 767.98px) {
  .px-facts { grid-template-columns: repeat(2, auto); }
  .px-art { --r: 34cqw; }
  .px-planet-inner .pm-icon { width: 20px; height: 20px; }
  .px-planet-inner { padding: 6px 9px; font-size: 11px; }
  .px-planet-inner .pm-mark-logo { height: 17px; }
  .px-core { padding: 12px 14px; }
  .px-core .pm-icon { width: 44px; height: 44px; }
  .px-proof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-cap-grid, .px-grid { grid-template-columns: 1fr; }
}

/* card media: keep device shots inside the header */
.px-card-media { overflow: hidden; }
.px-card-media img { width: auto; height: auto; max-height: 164px; max-width: 92%; }
/* one product in a category: a wide card, picture beside the copy; two: half and half */
.px-grid:has(> .px-card:only-child) { grid-template-columns: 1fr; }
.px-card:only-child { flex-direction: row; }
.px-card:only-child .px-card-media { flex: 0 0 46%; height: auto; min-height: 320px; border-bottom: 0; border-inline-end: 1px solid var(--pm-line); }
.px-card:only-child .px-card-media img { max-height: 280px; }
.px-card:only-child .px-card-body { padding: 30px 34px; }
.px-grid:has(> .px-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767.98px) {
  .px-card:only-child { flex-direction: column; }
  .px-card:only-child .px-card-media { flex: none; min-height: 0; height: 200px; border-inline-end: 0; border-bottom: 1px solid var(--pm-line); }
  .px-grid:has(> .px-card:nth-child(2):last-child) { grid-template-columns: 1fr; }
}

/* client logos: every logo contained in the same box, centred, never cropped */
.px-logos-track li { width: 150px; height: 84px; padding: 0; overflow: hidden; }
.px-logos-track img { display: block; width: auto; height: auto; max-width: 118px; max-height: 56px; object-fit: contain; }
.px-logos { padding-block: 2px; }
/* filters: every chip visible in one row; results land under the sticky bar */
.px-search { flex: 0 0 260px; }
.px-chips { flex-wrap: wrap; overflow: visible; gap: 8px; }
.px-chips .pi-chip { padding: 9px 15px; }
.pi-cat { scroll-margin-top: calc(var(--pd-sticky) + 90px); }
@media (max-width: 991.98px) {
  .px-search { flex: 0 0 auto; height: 44px; }
  .px-chips { flex-wrap: nowrap; overflow-x: auto; }
  .px-toolbar-inner { gap: 8px; padding-block: 8px; min-height: 0; }
}

/* filter chips never wrap, in any language (i18n.css lets other buttons wrap) */
.px-chips .pi-chip, .cap-filter .pi-chip { white-space: nowrap !important; flex: none; }