/* Search and discovery optimization (NDAP) — the Figma frames from banner 886:9115 onwards, placed as
   they are. The page takes the frames' off-white, every frame shares one scale (one Figma px = 100cqi / 1280)
   and each frame runs to the right edge of the page. */
.sx { --paper: #fdfdfd; --k: calc(100cqi / 1280); }
body.sx { background: var(--paper); }

.sx-cover { background: #00001a; }
.sx-cover > img { display: block; width: 100%; height: auto; }

.sx .study { grid-template-columns: var(--sidenav-w) minmax(0, 1fr); justify-content: stretch; padding-right: 0; }
@media (max-width: 1024px) { .sx .study { grid-template-columns: minmax(0, 1fr); } }
.study > main { container-type: inline-size; padding: 0 0 120px; }

.shot { position: relative; width: calc(var(--w) * var(--k)); margin: calc(var(--gap) * var(--k)) 0 0 auto; }
.shot img { display: block; width: 100%; height: auto; }

/* The heuristic frame is wider than the rest (1440 instead of 1280): it is shown at the column width
   so none of it is cut off */
.shot--wide { width: 100%; }

/* The quote sits alone in the middle of its own screen */
.shot--center { width: 100%; min-height: calc(100svh - 57px); display: flex; align-items: center; justify-content: flex-end; }
.shot--center .shot__inner { width: calc(var(--w) * var(--k)); }

@media (max-width: 760px) {
  .shot--center { min-height: 0; padding: 48px 0; }
}

/* Style guide and final screens sit on a slightly darker grey: it runs the full width of the page,
   and through the space between the two frames, so it has no visible edge */
.shot--grey { isolation: isolate; }
.shot--grey::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; left: -100vw; background: #f8f8f8; }
.shot--join::before { top: calc(-1 * var(--gap) * var(--k)); }
.sx .sidenav { z-index: 2; }
.sx-flow:has(> .shot--grey:last-child) { padding-bottom: 0; }