/* v6.html: the desktop of v5 in a second take, loaded after hero-v5.css. Phones and tablets stay
   as in v5.

   The top bar: the wordmark on the left and the menu in the middle (v5 has them the other way
   round); the actions stay on the right. The menu only shows from 901px (landing.css). The centred
   menu and both actions fit side by side from about 1180px; below that "Become a partner" steps
   aside (the button next to it leads to the same form) — out of the row and out of sight, but still
   there to be measured: the hero's mark takes the width of both actions (corner() in v6.html) */
@media (min-width: 901px) {
  .site-header .header__logo { position: static; transform: none; }
  .site-header .slash-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .site-header .header__link { position: absolute; visibility: hidden; pointer-events: none; }
}

/* The glass mark on landscape screens: in the top right corner on the top bar's grid — as wide as
   "Become a partner" and the button together, its right edge under the button's, the card's side
   padding down from the top (corner() and placement() in v6.html, which set --corner-x, --corner-y
   and --corner-h on the card; the values here only hold until the script has run: v6's first
   size, 38.4% of the card's height). The no-WebGPU stand-in sits there too, and so does the intro's
   grey mark: it rises in the corner from the start and fades out there when it hands over to the
   glass (intro-out). */
@media (min-aspect-ratio: 1001/1000) {
  .stage {
    --corner-x: calc(100% - var(--stage-pad) - 0.1813 * var(--stage-h));
    --corner-y: calc(var(--stage-pad) + 0.192 * var(--stage-h));
    --corner-h: calc(0.384 * var(--stage-h));
  }
  .stage__fallback, .stage__intro { left: var(--corner-x); top: var(--corner-y); height: var(--corner-h); }
}

/* The facts on landscape screens: in the bottom right corner, as in v5, their right edge on the same
   line as the button above and the mark (the card's side padding in from the right), side by side
   with a thin rule between them down to 1200px — hero-v5.css stacks them below 1440px, but with
   the copy's 520px lead the row still fits beside it down to here; below, they stack as in v5 */
@media (min-aspect-ratio: 1001/1000) and (min-width: 1200px) and (max-width: 1439px) {
  .stage__facts { flex-direction: row; gap: 0; }
  .stage__fact { padding: 0 var(--space-6); border-left: 1px solid rgba(255, 255, 255, .2); }
  .stage__fact:first-child { padding-left: 0; border-left: 0; }
}