/* ============================================================
   Phantomexposure — nav platform marks
   Split out of pe-headline.css in pass 30: the badges appear in
   the nav on the home page AND both listing pages, but
   pe-headline.css is home-only, so on the listing pages the
   marks were rendering at intrinsic size (the inline SVG has no
   width/height, so it fell back to the 300x150 default).
   This file must be linked anywhere .nav-platforms appears.
   ============================================================ */

/* ============================================================
   Nav platform badges, pass 28.

   The "Supported now" strip at the foot of the home page was
   removed. Windows and VST3 now sit in the top bar as marks
   only — no labels, since the format is obvious to anyone
   shopping for a plugin.

   Both source logos are solid black artwork, which would be
   invisible on the dark bar. Windows is inlined in the markup
   with fill:currentColor, so it takes its colour from
   .nav-platforms and costs no extra request. VST3 is served as
   vst3-nav.png — the same mark re-inked bone, alpha and
   proportions intact, trimmed to its bounding box so the CSS
   dimensions below are exact.
   ============================================================ */

.nav-platforms{
  display:flex;
  align-items:center;
  gap:14px;
  margin-left:16px;
  padding-left:16px;
  border-left:1px solid rgba(255,255,255,.09);
  flex:0 0 auto;
  color:rgba(222,215,204,.62);
}

.nav-platforms img,
.nav-platforms svg{
  display:block;
  flex:0 0 auto;
  opacity:.72;
  transition:opacity .18s ease;
}
.nav-platforms:hover img,
.nav-platforms:hover svg{ opacity:.95; }

/* Windows: 1.135:1, inherits colour from .nav-platforms */
.nav-platforms .plat-windows{
  width:17px;
  height:15px;
}

/* VST3: 1.719:1, deliberately larger — it is the mark that matters */
.nav-platforms .plat-vst3{
  width:41px;
  height:24px;
  object-fit:contain;
}

/* Tuck in slightly once the bar gets tight */
@media (max-width:820px){
  .nav-platforms{
    gap:11px;
    margin-left:12px;
    padding-left:12px;
  }
  .nav-platforms .plat-vst3{ width:36px; height:21px; }
  .nav-platforms .plat-windows{ width:15px; height:13px; }
}

/* Below 620px the brand text is already hidden and the bar is tight, so
   the badges stay but the bar has to give a little room back: the menu
   pill's triggers tighten and the marks step down a size. Measured at
   320/360/375/414 with both triggers at their full labels. */
@media (max-width:620px){
  .nav-inner{ gap:13px; }
  .nav-links{ gap:5px; }
  .nav-product-trigger{ padding:11px 12px; }

  .nav-platforms{
    gap:9px;
    margin-left:10px;
    padding-left:10px;
  }
  .nav-platforms .plat-vst3{ width:31px; height:18px; }
  .nav-platforms .plat-windows{ width:13px; height:11px; }
}

/* Small phones. The divider goes, the triggers tighten again, and the
   marks take their smallest size — this is what keeps a 320px screen
   from pushing the pill off the edge. */
@media (max-width:400px){
  .nav-inner{ gap:10px; }
  .nav-links{ gap:4px; }
  .nav-product-trigger{ padding:11px 9px; }

  .nav-platforms{
    gap:7px;
    margin-left:8px;
    padding-left:0;
    border-left:0;
  }
  .nav-platforms .plat-vst3{ width:26px; height:15px; }
  .nav-platforms .plat-windows{ width:11px; height:10px; }
}