/* Inside Premier (section#platforms). Only what the original markup can't express after the swap. */

/* Dashboard relabel overlay (built by _build/t/inside.js). It has the box of the raster <img>; every patch is
   a piece of that same image (clone stamp) and every label is set in the site's Suisse Intl at the raster's
   measured size and colour. Positions are raster pixels baked into the inline styles; the fit-panel scaler
   scales the whole panel. */
.section-platforms .ins-ov { pointer-events: none; }
.section-platforms .ins-ov > * { position: absolute; display: block; }
.section-platforms .ins-p {
  background-image: url("/__l5e/assets-v1/a971c2bc-b9fe-4566-a1f7-6ae926374581/2a2cf.png");
  background-repeat: no-repeat;
}
.section-platforms .ins-flip { transform: scaleX(-1); }
.section-platforms .ins-t {
  top: 0;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 0;
  letter-spacing: 0;
  white-space: nowrap;
  color: #fff;                       /* the raster's titles */
}
/* Baseline at exactly --by from the overlay top: a zero-width strut of that height shares the line's baseline
   and (line-height 0) is the tallest thing on it, so the line box starts at the overlay top. */
.section-platforms .ins-t::before {
  content: "";
  display: inline-block;
  width: 0;
  height: var(--by, 0);
  vertical-align: baseline;
}
.section-platforms .ins-t.ins-m { color: rgba(255, 255, 255, .8); } /* inactive nav labels */
.section-platforms .ins-t.ins-g { color: #8b8d95; }                 /* the raster's secondary grey */
.section-platforms .ins-t.ins-500 { font-weight: 500; }

/* The brief's tile copy runs a few characters longer than the original's. Where a description wraps (360px
   phones, the 1100-1420 desktop range) don't leave a lone word on the second line. One-line text is unaffected. */
.section-platforms [data-node-id="427:2523"] p:last-child { text-wrap: pretty; }

/* Phones: keep the desktop crop of the dashboard (1036 x 569 frame) instead of the original's whole-screenshot
   620 x 341 frame, so only the relabelled part of the image is ever on screen. */
@media (max-width: 767px) {
  .section-platforms .mobile-view [data-node-id="635:1209"] { width: 1036px; height: 569px; }
}

/* ?static (screenshot mode, js/sections/inside.js adds .ins-static): the first frame of the phone scroll-through
   (first tab) and no pill / label transitions. The 300svh scroll track collapses to the stage, so a full-page
   screenshot doesn't show ~1700px of empty black under it. */
.section-platforms.ins-static .t-tabs-pill,
.section-platforms.ins-static .t-tabs > [role="tab"] { transition: none !important; }
@media (max-width: 767px) {
  .section-platforms.ins-static { min-height: 0; }
  .section-platforms.ins-static > .mobile-view { position: relative; }
}