/* ============================================================
   PLATFORMS fold — "Minded works where you work"
   Shared by the landing page and every solutions page: the demo
   showcase (.bw-wrap.bw-showcase) sits beside a vertical platform
   rail on ≥861px; below that the stock horizontal tab pill and
   auto-rotation are untouched.
   ============================================================ */
#platforms .section-head { margin-bottom: 26px; }
/* the demo floats bare like the recording section's stage — no gradient card */
.bw-showcase .bw-panes { background: transparent; }
/* mobile: keep the lead to the rotor sentence (two lines max) */
@media (max-width: 860px) {
  #platforms .lead .lead-more { display: none; }
}
@media (min-width: 861px) {
  /* demo card caps at 856px — the stage's authored size (scale 1), the same fixed
     box the demo had inside the hero — and only shrinks when the column runs out */
  #platforms .container { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(0, 856px); column-gap: 56px; align-items: center; }
  /* title row spans the full fold; rail + demo share the row below */
  #platforms .section-head { grid-column: 1 / -1; max-width: none; }
  #platforms .section-head h2 { white-space: nowrap; font-size: clamp(34px, 4.6vw, 56px); }
  .bw-showcase { display: contents; }
  /* the tab pill becomes a vertical rail: icon + name, tagline under the active one
     (bwShow stamps data-tagline from the shared/per-page tagline map) */
  .bw-showcase .bw-tabs { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; margin: 0; padding: 0;
    background: transparent; border: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; }
  .bw-showcase .bw-tab { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; justify-items: start; column-gap: 14px;
    height: auto; padding: 14px 16px; border-radius: 16px; text-align: left; transition: opacity .3s ease, background .3s ease; }
  .bw-showcase .bw-tab .tt { display: block; font-size: 17px; }
  .bw-showcase .bw-tab:not(.active) { opacity: .45; padding: 14px 16px; }
  .bw-showcase .bw-tab:not(.active):hover { opacity: .8; }
  .bw-showcase .bw-tab .bw-favic, .bw-showcase .bw-tab .bw-brand { width: 22px; height: 22px; justify-self: center; }
  /* the shared white card (.bw-ink) slides between rail rows — the active tab itself
     stays transparent so selection reads as one object moving, not a background pop */
  .bw-showcase .bw-tabs { position: relative; }
  .bw-showcase .bw-ink { display: block; position: absolute; top: 0; bottom: auto; left: 0; right: 0; width: auto;
    height: var(--ink-h, 0px); transform: translateY(var(--ink-y, 0px)); border-radius: 16px; background: #fff;
    border: none; box-shadow: var(--shadow-button); pointer-events: none;
    transition: transform .45s cubic-bezier(.22,1,.36,1), height .45s cubic-bezier(.22,1,.36,1); }
  .bw-showcase .bw-tab.active { background: #fff; box-shadow: var(--shadow-button); padding: 14px 16px; }
  .bw-showcase .bw-tabs.has-ink .bw-tab.active { background: transparent; box-shadow: none; }
  /* tagline eases open under the active row instead of popping via display toggle */
  /* tagline runs the full card width, flush with the platform icon rather than
     indented under the title, and sits tight to it like the role rows' sub-line */
  .bw-showcase .bw-tab::after { content: attr(data-tagline); grid-column: 1 / -1; display: block;
    max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-2px); margin-top: 0;
    font-size: 13.5px; font-weight: 400; color: var(--slate-600); line-height: 1.55; white-space: normal;
    transition: max-height .3s ease, opacity .22s ease, transform .3s ease, margin-top .3s ease; }
  .bw-showcase .bw-tab.active::after { max-height: 64px; opacity: 1; transform: none; margin-top: 2px; }
  /* the demo auto-advances — the active card's bottom edge fills with the same
     2px brand-gradient bar the #usecases role list uses (.ucx-r.on::after) */
  .bw-showcase .bw-tab .vt-prog { display: none; }
  .bw-showcase .bw-tab { overflow: hidden; } /* clips the bar to the card's rounded corners */
  .bw-showcase .bw-tab::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, #FFAC6F, #FF5F34 50%, #E43CFF); opacity: 0;
    transform: scaleX(0); transform-origin: left center; pointer-events: none; }
  .bw-showcase .bw-tab.active.prog::before { opacity: 1; animation: bwRailProg var(--bw-prog-ms, 8000ms) linear forwards; }
  /* demo card on the right; panes keep their 820×500 authoring stage and scale to
     the card via --sbs-scale (set from JS on resize) */
  .bw-showcase .bw-panes { grid-column: 2; grid-row: 2; width: 100%; max-width: none; margin: 0; min-height: 0;
    height: calc(var(--sbs-scale, 0.84) * 500px + 36px); }
  .bw-showcase .bw-pane { width: 820px; height: 500px; transform: translateY(10px) scale(var(--sbs-scale, 0.84)); transform-origin: top left; }
  .bw-showcase .bw-pane.active { transform: scale(var(--sbs-scale, 0.84)); }
  /* Teams: keep the full 820px stage — solutions-teams-redesign.css forces the active
     teams pane to 100% (the narrower grid track), which shrank it vs the other demos */
  .bw-showcase .bw-pane[data-bw="teams"].active { width: 820px; }
  /* …and slim the chats-list column so the thread reads as wide as the other demos */
  .bw-showcase .chatapp.teamsx .tx-list { width: 200px; }
  /* Slack: shrink the window's authoring size (1180×660 native) so bwSlackFit lands on a
     larger --slk-scale — same full-width window, ~18% bigger type */
  .bw-showcase .slackwin { width: 1000px; height: 560px; }
}
@keyframes bwRailProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .bw-showcase .bw-ink { transition: none; }
  .bw-showcase .bw-tab::after { transition: none; }
  .bw-showcase .bw-tab.active.prog::before { animation: none; opacity: 0; }
}