/* Shared large-screen layout for the three staging landing previews.
   Keep reading measures bounded while giving diagrams and imagery more room.
   Cap image growth independently of viewport width to preserve subject scale. */
@media (min-width: 1601px) {
  html { font-size: clamp(16px, calc(10.667px + .3333vw), 20px); }
  body.mkt { font-size: clamp(16px, 1vw, 20px); }
  .lp { width: 94%; max-width: 2560px; padding-inline: clamp(24px, 2vw, 64px); }
  .lp__bar { padding-block: clamp(16px, 1vw, 24px); }
  .lp__bar img { height: clamp(26px, 1.3vw, 34px); }
  .hero, .mhero, .chero {
    --photo-canvas: min(100vw, 2560px);
    min-height: clamp(680px, 34vw, 900px);
    padding-block: clamp(48px, 3vw, 80px);
  }
  .hero h1, .mhero h1, .chero h1 { font-size: clamp(52px, 3vw, 72px); max-width: 24ch; }
  .hero::before, .mhero::before, .chero::before,
  .hero::after, .mhero::after, .chero::after {
    left: 50%; right: auto; width: var(--photo-canvas); transform: translateX(-50%);
  }
  .hero::before, .chero::before {
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 90%, transparent);
  }
  .mhero::before {
    left: auto; right: calc((100% - var(--photo-canvas)) / 2);
    width: min(84vw, 2150px); transform: none;
    mask-image: linear-gradient(90deg, transparent, #000 26%, #000 90%, transparent);
  }
  .sec { padding-block: clamp(40px, 2.5vw, 64px); }
  .chapter__lede, .blk__lede { max-width: 64ch; }
  .rung__body { max-width: 76ch; }
  .ladder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; }
  .ladder::before { display: none; }
  .rung + .rung { margin-top: 0; }
  .rung:last-child .rung__body { border-bottom: 1px solid var(--border); padding-bottom: var(--sp-4); }
}

/* A small sample beside the evidence note, within the left side of the hero. */
.hero__support { margin-top: 16px; }
.hero__support .hero__det { margin-top: 0; }
.glance--compact { width: 100%; max-width: 360px; padding: 10px 12px; margin-top: 16px; }
.glance--compact .glance__hd { gap: 8px; margin-bottom: 6px; }
.glance--compact .glance__d, .glance--compact .chip { font-size: 10px; }
.glance--compact .glance__verdict { font-size: 13px; margin-bottom: 4px; }
.glance--compact .glance__row { grid-template-columns: 42px minmax(0, 1fr); gap: 8px; padding-block: 3px; font-size: 11px; }
.glance--compact .glance__row b { font-size: 11px; line-height: 1.45; }
.glance--compact .glance__src { font-size: 10px; margin-top: 6px; padding-top: 6px; }
@media (min-width: 900px) {
  .hero__support { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; width: min(914px, 65vw); align-items: start; }
  .hero__support .glance--compact { margin-top: 28px; }
}