/* Homepage section transitions; see section-transitions.js. */
.sxt-layer { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.sxt-fly { position: absolute; left: 0; top: 0; display: none; }
/* G: the editor's frame travels above the section before it. */
.sxt-g-stage { z-index: 5; }
.sxt-g { overflow: hidden; border-radius: 12px; }
.sxt-g.wc { background: none; padding: 0; }   /* .wc's band styles, not its colours */
.sxt-g > i { position: absolute; display: block; }
.sxt-g-tb { left: 0; top: 0; right: 0; }
.sxt-g-side { left: 0; bottom: 0; }
.sxt-g-main { right: 0; bottom: 0; }
.sxt-g-tb, .sxt-g-side { overflow: hidden; }
.sxt-g-strip { left: 0; right: 0; bottom: 0; }
.sxt-b { overflow: hidden; background: #fff; }
.sxt-b > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* the card's document the lease turns into; its stage keeps no backdrop */
.sxt-b-to, .sxt-b-to * { transition: none !important; animation: none !important; }
.sxt-b .sxt-b-to { position: absolute !important; left: 0; top: 0; transform-origin: 0 0; display: block; margin: 0 !important; padding: 0 !important; gap: 0; }
.sxt-b-to .cx-card { position: absolute; inset: 0; background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }
.sxt-b-to .cx-stage { position: absolute; inset: 0; background: none !important; }
.sxt-h { transform-origin: 0 0; }

/* The first card waits as a drop target until the document lands. */
.sxt-drop { position: absolute; inset: 0; z-index: 5; background: linear-gradient(180deg, #F3F6FB, #E9EEF6); pointer-events: none; }
.sxt-drop i { position: absolute; inset: 22px; border: 2px dashed rgba(74, 143, 243, .55); border-radius: 14px; }
.sxt-drop span { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center;
  color: var(--color-primary-text, #2F6FD0); font: 600 15px/1 var(--font-body, -apple-system, system-ui); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sxt-drop { background: linear-gradient(180deg, #1D2024, #16181B); } }
:root[data-theme="dark"] .sxt-drop { background: linear-gradient(180deg, #1D2024, #16181B); }

/* The Race holds in place while its view pulls back. */
.sxt-pin { position: relative; }
#race.sxt-pinned { position: sticky; top: 0; overflow: clip; }

/* Prototype-only switcher (?proto). */
.sxt-proto { position: fixed; left: 16px; bottom: 16px; z-index: 9999; display: flex; gap: 6px; padding: 6px 8px;
  border-radius: 10px; background: rgba(20, 22, 26, .86); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.sxt-proto button { font: 600 12px/1 var(--font-body, system-ui); color: #fff; background: rgba(255, 255, 255, .12);
  border: 0; border-radius: 6px; padding: 6px 9px; cursor: pointer; }
.sxt-proto button[aria-pressed="true"] { background: #4A8FF3; }