/* "Platforms we work with" strip inside the homepage hero.
   Markup: index.html between <!-- platforms:start --> and <!-- platforms:end -->.
   Logos are inline <symbol>s (sources and licences in /assets/platforms/SOURCES.md).
   Static wrapped layout by default (no JS, reduced motion, paused). platforms.js adds
   .is-marquee only while html.js-motion is present, and .is-playing while on screen. */

.pf{
  --pf-ink:var(--ink-2);
  grid-column:1/-1;min-width:0;
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);grid-template-areas:"title note" "rail rail";
  align-items:baseline;gap:6px 32px;
  padding-top:18px;border-top:1px solid var(--line)
}
.pf-sprite{position:absolute;width:0;height:0;overflow:hidden}
.pf-title{grid-area:title;font:600 15px/1.3 var(--display);letter-spacing:-.01em;color:var(--ink)}
.pf-note{grid-area:note;justify-self:end;max-width:62em;font-size:12.5px;line-height:1.45;color:var(--muted);text-align:right}
.pf-rail{grid-area:rail;min-width:0;margin-top:6px}

/* Static layout: every group once, wrapped from the left. */
.pf-list{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:0 32px}
.pf-group{display:flex;align-items:center;gap:6px 14px;min-width:0}
.pf-group-name{flex:none;font-size:12.5px;line-height:1.3;color:var(--muted)}
.pf-items{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-width:0}
.pf-item{display:flex;align-items:center;gap:8px;height:36px;padding:0 8px;border-radius:10px;color:var(--pf-ink);white-space:nowrap;transition:background-color .2s,box-shadow .2s}
.pf-logo{display:block;flex:none;fill:currentColor;transition:color .2s}
.pf-mask{background:currentColor;-webkit-mask:url(/assets/platforms/careem.png) center/contain no-repeat;mask:url(/assets/platforms/careem.png) center/contain no-repeat}
.pf-name{font:500 14px/1 var(--body);color:var(--ink-2);transition:color .2s}
.pf-sym{fill:var(--pf-sym,currentColor);transition:fill .2s}

/* Hover/focus: the logo takes its brand colour; a quiet surface marks every item,
   including the near-black brands whose colour change would not be visible. */
.pf-item:hover,.pf-item:focus-within{background:var(--white);box-shadow:0 0 0 1px var(--line)}
.pf-item:hover .pf-logo,.pf-item:focus-within .pf-logo{color:var(--brand,var(--ink));--pf-sym:var(--pf-sym-brand)}
.pf-item:hover .pf-name,.pf-item:focus-within .pf-name{color:var(--ink)}

/* Marquee: one row, two copies of the list, moving left at a fixed speed. */
.js-motion .pf.is-marquee .pf-rail{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.js-motion .pf.is-marquee .pf-track{display:flex;width:max-content;animation:pf-scroll var(--pf-dur,80s) linear infinite;animation-play-state:paused;will-change:transform}
.js-motion .pf.is-marquee.is-playing .pf-track{animation-play-state:running}
.js-motion .pf.is-marquee .pf-rail:hover .pf-track,.js-motion .pf.is-marquee .pf-rail:focus-within .pf-track{animation-play-state:paused}
.js-motion .pf.is-marquee .pf-list{flex-wrap:nowrap;justify-content:flex-start;gap:0;margin-left:0}
/* Group break: a short rule centred between the last logo and the next label. */
.js-motion .pf.is-marquee .pf-group::before{content:"";flex:none;width:1px;height:18px;margin:0 14px 0 16px;background:#251c3833}
.js-motion .pf.is-marquee .pf-items{flex-wrap:nowrap}
.js-motion .pf.is-marquee .pf-item{height:46px;padding:0 10px}
.pf-clone{display:none}
.js-motion .pf.is-marquee .pf-clone{display:flex}
@keyframes pf-scroll{to{transform:translateX(-50%)}}

/* Desktop: keep the strip above the fold on common laptop heights. */
@media(min-width:1100px){
  .hero{row-gap:clamp(28px,3vh,44px)}
}
@media(min-width:1100px) and (max-height:860px){
  .hero{padding-top:clamp(24px,3.2vh,40px);padding-bottom:clamp(36px,4vw,56px)}
  .pf:not(.is-marquee) .pf-rail{margin-top:2px}
  .pf:not(.is-marquee) .pf-item{height:32px}
}

@media(max-width:1099px){
  .pf{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "rail" "note"}
  .pf-note{justify-self:start;text-align:left;margin-top:6px}
}
@media(max-width:640px){
  .pf{padding-top:16px}
  .pf-list{gap:2px 20px}
  .pf-group{flex-wrap:wrap;gap:0 4px}
  .pf-group-name{margin-right:4px}
  .pf-item{height:32px;padding:0 6px}
  .js-motion .pf.is-marquee .pf-group{flex-wrap:nowrap}
  .js-motion .pf.is-marquee .pf-group::before{margin:0 10px 0 8px}
  .js-motion .pf.is-marquee .pf-rail{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
}

@media(forced-colors:active){
  .pf-mask{forced-color-adjust:none;background:CanvasText}
}