/* Opt-in mobile review; the ordinary URL keeps the existing staircase. */
.ms-story{display:none}
@media (max-width:900px){
  html.mobile-story-preview #why .sec__head,
  html.mobile-story-preview #why .stbox{display:none}
  html.mobile-story-preview #why{padding-block:40px 56px}
  html.mobile-story-preview #why .what{font-size:clamp(20px,5.8vw,28px);margin-top:20px}
  html.mobile-story-preview .ms-story{display:block;margin-top:28px}
  /* Equal reading space keeps every caption beside its effect. Stable viewport
     units avoid stretching the composition when Safari's toolbar changes height. */
  .ms-card{min-height:calc(100svh - 68px);display:flex;flex-direction:column;box-sizing:border-box;
    padding:28px 0 30px;border-top:1px solid var(--line);gap:20px}
  .ms-card__heading{position:relative;flex-shrink:0;transform:translateZ(0)}
  .ms-card__number{display:block;font:11px/1.4 var(--f-mono);letter-spacing:.07em;color:var(--muted);margin-bottom:18px}
  .ms-card__duration{margin:0;font:italic 500 clamp(46px,12.8vw,72px)/1.06 var(--f-serif);letter-spacing:-.035em}
  .ms-card__duration::first-letter{text-transform:uppercase}
  .ms-card__name{margin:13px 0 0;font:700 clamp(12px,3.5vw,17px)/1.4 var(--f-display);letter-spacing:-.01em;text-transform:uppercase}
  .ms-card__scene{position:relative;flex:1;min-height:180px;max-height:390px;display:flex;align-items:stretch;justify-content:center;pointer-events:none}
  /* Fade the existing footage into the cream page instead of showing a hard video
     rectangle. These static masks do not move the caption or affect document flow. */
  .ms-card__effect.st__fx{position:relative;inset:auto;width:100%;height:auto;min-height:180px;margin:0;
    opacity:1;transition:none;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 76%,transparent 100%),linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 76%,transparent 100%),linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  /* The original neural clip is a narrow vertical strip; preserve that composition
     rather than magnifying its compact frame atlas to the full screen width. */
  .ms-card[data-technology="neurons"] .ms-card__effect{width:100px;min-height:280px;background:var(--black);
    -webkit-mask-image:none;mask-image:none;border-radius:2px}
  .ms-card__timeline{height:13px;border-bottom:1px solid var(--black);flex-shrink:0}
  /* Duration sets the fixed wrapper width; only the inner bar's transform animates. */
  .ms-card__length{height:100%}
  .ms-card__bar{display:block;height:100%;background:var(--yellow);border:1px solid var(--black);
    border-bottom:none;box-sizing:border-box;transform-origin:left center}
  .ms-card__note{min-height:32px;margin:0;max-width:28em;font:13px/1.45 var(--f-body);color:var(--muted)}
  .ms-card__stat{display:block;margin-top:9px}
  .ms-card[data-technology="neurons"] .ms-card__scene,
  .ms-card[data-technology="neurons"] .ms-card__effect{min-height:220px}
  @media (max-height:620px){
    .ms-card{min-height:calc(100svh - 40px);gap:14px;padding-block:24px}
    .ms-card__number{margin-bottom:12px}
    .ms-card__scene,.ms-card__effect.st__fx{min-height:150px}
    .ms-card[data-technology="neurons"] .ms-card__effect,
    .ms-card[data-technology="neurons"] .ms-card__scene{min-height:200px}
    .ms-card__note{min-height:24px;font-size:12px}
  }
}