/* Roster homepage sections: people slider, built by creators, summary bento.
   Everything is namespaced sx-. Relies on brand.css tokens (colors, easings, .display, .eyebrow, .btn, .av). */
/* JetBrains Mono is linked from index.html's head. */

.sx { --sx-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; position: relative; }
/* local reset so the fragments do not depend on the host page's preflight */
:where(.sx, .sx *, .sx *::before, .sx *::after) { box-sizing: border-box; }
:where(.sx) :where(h2, h3, p, ul, figure, blockquote) { margin: 0; }
:where(.sx) :where(ul) { padding: 0; list-style: none; }
:where(.sx) :where(img, svg) { display: block; max-width: 100%; }
:where(.sx) :where(button) { font: inherit; }
.sx-wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .sx-wrap { padding: 0 28px; } }
.sx-sec { padding: clamp(88px, 10vw, 144px) 0; scroll-margin-top: 90px; }
.sx :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
:where(.sx) img { -webkit-user-drag: none; user-select: none; }
.sx [data-sx-odo] { display: inline-flex; line-height: 1; }

/* ---------- header: eyebrow + big headline left, short paragraph right ---------- */
.sx-head { display: grid; gap: 22px; }
@media (min-width: 1024px) { .sx-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 48px; } }
.sx-h2 { margin-top: 20px; font-size: clamp(38px, 5vw, 72px); }
.sx-h2 em { background: linear-gradient(100deg, #E8502C 0%, #EE6F86 52%, #9B7BE6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .07em; margin-right: -.07em; }
.sx-sub { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 34em; }
@media (min-width: 1024px) { .sx-sub { padding-bottom: .5em; } }

/* ---------- reveal ---------- */
.sx-rv { opacity: 0; transform: translateY(18px); filter: blur(4px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out), filter .9s var(--ease-out); transition-delay: var(--d, 0ms); }
.sx-rv.sx-in { opacity: 1; transform: none; filter: none; }
[data-sx-lines]:not(.sx-in) .ln > span { transform: translateY(110%) rotate(1.5deg); }
[data-sx-lines].sx-in .ln > span { transform: none; }

/* cursor glow shared by every card: --mx/--my set by sections.js */
.sx-glow { isolation: isolate; }
.sx-glow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease-out);
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--a0, var(--apricot)) 34%, transparent), transparent 62%); }
@media (hover: hover) and (pointer: fine) { a.sx-glow:hover::before { opacity: 1; } } /* R8: glow only when the card is a link */

/* person color dot */
.sx-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 99px; background: linear-gradient(135deg, var(--a0, var(--coral)), var(--a1, var(--rose)) 60%, var(--a2, var(--lilac))); }

/* =====================================================================
   1. PEOPLE SLIDER
   ===================================================================== */
.sx-vp { -webkit-user-select: none; user-select: none; position: relative; margin-top: clamp(40px, 5vw, 64px); overflow: hidden; touch-action: pan-y; cursor: grab; outline: none; -webkit-tap-highlight-color: transparent; }
.sx-vp.is-drag { cursor: grabbing; }
.sx-vp:focus-visible { outline: none; }
.sx-vp:focus-visible .sx-track { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 30px; }
.sx-vp { container-type: inline-size; }
.sx-track { --sx-g: 16px; display: flex; align-items: stretch; gap: 14px; width: max-content; padding: 14px var(--sx-g) 64px; will-change: transform; }
@media (min-width: 640px) { .sx-track { --sx-g: max(28px, calc((100cqw - 1224px) / 2)); gap: 18px; } }

.sx-pc { position: relative; flex: none; width: clamp(252px, 72vw, 300px); }
@media (min-width: 640px) { .sx-pc { width: clamp(264px, 22vw, 296px); } }
.sx-pc-in { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 28px; padding: 8px 8px 20px; background: var(--cream); border: 1px solid var(--line);
  transition: transform .7s var(--ease-spring), box-shadow .7s var(--ease-spring), border-color .4s; }
.sx-pc-ph { position: relative; aspect-ratio: 4 / 5; border-radius: 21px; overflow: hidden; background: var(--paper-2); isolation: isolate; }
.sx-pc-ph img { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); max-width: none; object-fit: cover; object-position: 50% 28%;
  translate: var(--px, 0px) var(--py, 0px); transition: translate .8s var(--ease-out), scale 1.1s var(--ease-out); }
.sx-pc-ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(20,18,16,.06); pointer-events: none; }
.sx-pc-body { padding: 18px 12px 0; display: flex; flex-direction: column; flex: 1; }
.sx-pc-name { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.05; letter-spacing: -.02em; font-variation-settings: "opsz" 144, "SOFT" 50; }
.sx-pc-role { margin-top: 7px; display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
.sx-pc-with { margin-top: auto; padding-top: 18px; }
.sx-pc-with > div { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.sx-pc-with small { display: block; font-size: 12px; color: var(--mute); }
.sx-pc-with img { width: 30px; height: 30px; border-radius: 99px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(20,18,16,.08); }
.sx-pc-with b { display: block; font-size: 14.5px; font-weight: 550; line-height: 1.2; }

@media (hover: hover) and (pointer: fine) {
  /* R8: people cards are not links; only the closing card (a link) lifts */
  .sx-vp:not(.is-drag) .sx-pc > a.sx-pc-in:hover { transform: translateY(-8px); box-shadow: 0 36px 60px -34px rgba(20,18,16,.38); }
}
.sx-vp.is-drag .sx-glow::before { opacity: 0; }

/* closing card: a real link */
.sx-pc-end .sx-pc-in { background: var(--ink); color: var(--paper); border-color: var(--ink); overflow: hidden; padding: 28px 26px 26px; justify-content: space-between; text-decoration: none; isolation: isolate; }
.sx-pc-end .sx-pc-in::after { content: ""; position: absolute; z-index: -1; width: 340px; height: 340px; right: -150px; top: -140px; border-radius: 999px; filter: blur(46px); opacity: .7;
  background: linear-gradient(135deg, var(--coral), var(--rose) 50%, var(--lilac)); transition: transform 1s var(--ease-spring), opacity .6s; }
.sx-pc-end .sx-pc-name { font-size: clamp(30px, 2.6vw, 38px); line-height: 1.02; }
.sx-pc-end p { font-size: 15px; color: rgba(246,243,236,.7); margin-top: 14px; max-width: 22ch; }
.sx-pc-end .sx-go { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; }
.sx-pc-end .sx-go svg { width: 16px; height: 16px; transition: transform .45s var(--ease-spring); }
@media (hover: hover) and (pointer: fine) {
  .sx-vp:not(.is-drag) .sx-pc-end:hover .sx-pc-in::after { transform: translate(-60px, 50px) scale(1.2); opacity: .95; }
  .sx-pc-end:hover .sx-go svg { transform: translateX(4px); }
}
.sx-pc-end a:focus-visible { outline-color: var(--paper); }

/* controls */
.sx-ctrl { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: -26px; }
.sx-prog { position: relative; flex: 1; max-width: 360px; height: 3px; border-radius: 3px; background: rgba(20,18,16,.1); overflow: hidden; }
.sx-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 30%); border-radius: 3px; background: var(--ink); transform: translateX(var(--x, 0%)); }
.sx-arrows { display: flex; gap: 10px; }
.sx-arrow { width: 50px; height: 50px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--cream); color: var(--ink); cursor: pointer;
  transition: background-color .3s var(--ease-spring), border-color .3s, opacity .3s, transform var(--dur-press) ease-out; }
.sx-arrow svg { width: 18px; height: 18px; transition: transform .45s var(--ease-spring); }
.sx-arrow:hover:not(:disabled) { background: #fff; border-color: rgba(20,18,16,.3); }
.sx-arrow:hover:not(:disabled) svg { transform: translateX(var(--nudge, 2px)); }
.sx-arrow[data-dir="-1"] { --nudge: -2px; }
.sx-arrow:active:not(:disabled) { transform: scale(.94); }
.sx-arrow:disabled { opacity: .35; cursor: default; }

/* =====================================================================
   2. BUILT BY CREATORS
   ===================================================================== */
.sx-panel { position: relative; border-radius: 40px; background: var(--cream); border: 1px solid var(--line); padding: 56px 20px 24px; }
@media (min-width: 640px) { .sx-panel { padding: 80px 44px 44px; } }
@media (min-width: 1024px) { .sx-panel { padding: 88px 56px 56px; } }
#proof.sx-sec { padding: clamp(24px, 3vw, 40px) 0; }

.sx-cw-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-top: clamp(48px, 6vw, 72px); }
.sx-cw-top p:last-child { font-size: 13px; color: var(--mute); }
.sx-cw { display: flex; gap: 10px; margin-top: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 18px; margin-left: -2px; margin-right: -2px;
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
.sx-cw::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .sx-cw { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-bottom: 6px; } }
.sx-cc { position: relative; flex: none; width: clamp(140px, 40vw, 190px); scroll-snap-align: start; }
@media (min-width: 1024px) { .sx-cc { width: auto; } }
.sx-cc-ph { position: relative; aspect-ratio: 3 / 4; border-radius: 22px; isolation: isolate; }
.sx-cc-aura { position: absolute; inset: 14% 6% -4%; z-index: -1; border-radius: 30px; filter: blur(22px); opacity: .45; background: linear-gradient(135deg, var(--a0), var(--a1) 55%, var(--a2));
  transition: opacity .6s var(--ease-out), transform .9s var(--ease-spring); }
.sx-cc-img { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: var(--paper-2); box-shadow: inset 0 0 0 1px rgba(20,18,16,.06); }
.sx-cc-img img { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); max-width: none; object-fit: cover; object-position: 50% 30%;
  translate: var(--px, 0px) var(--py, 0px); transition: translate .8s var(--ease-out), scale 1.1s var(--ease-out); }
.sx-cc-name { margin-top: 14px; font-family: var(--font-display); font-size: clamp(19px, 1.45vw, 22px); line-height: 1.08; letter-spacing: -.015em; font-variation-settings: "opsz" 144, "SOFT" 50; }
.sx-cc-meta { margin-top: 5px; font-size: 13px; color: var(--mute); display: flex; flex-wrap: wrap; gap: 0 6px; }
.sx-cc-meta b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.sx-cc-meta [data-sx-odo] { display: inline-flex; }
@media (hover: hover) and (pointer: fine) {
  /* R8: channel cards are not links: no aura swell or photo zoom on hover */
}

/* quotes */
.sx-q { position: relative; margin-top: 28px; border-radius: 30px; background: var(--ink); color: var(--paper); overflow: hidden; isolation: isolate; padding: 26px 20px 30px; }
@media (min-width: 640px) { .sx-q { padding: 40px 48px 48px; } }
.sx-q-aura { position: absolute; z-index: -1; right: -22%; top: -55%; width: 78%; height: 150%; border-radius: 999px; filter: blur(70px); opacity: .62; transition: opacity .8s; }
@media (max-width: 639px) { .sx-q-aura { right: -40%; top: -30%; width: 130%; height: 90%; } }
.sx-q-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 560px; }
.sx-q-tab { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 0 14px; background: none; border: 0; color: rgba(246,243,236,.55); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: color .35s var(--ease-out); border-radius: 8px; }
.sx-q-tab:hover, .sx-q-tab[aria-selected="true"] { color: var(--paper); }
.sx-q-tab:focus-visible { outline-color: var(--paper); outline-offset: 4px; }
.sx-q-tab .sx-face { width: 28px; height: 28px; }
.sx-q-tab span.n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-q-tab .seg { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: rgba(246,243,236,.18); overflow: hidden; }
.sx-q-tab .seg i { position: absolute; inset: 0; border-radius: inherit; background: var(--paper); transform-origin: left; transform: scaleX(var(--p, 0)); }
.sx-q-tab[data-done] .seg i { --p: 1; opacity: .5; }
.sx-face { position: relative; flex: none; border-radius: 99px; overflow: hidden; background: linear-gradient(135deg, var(--a0, var(--coral)), var(--a1, var(--rose)) 60%, var(--a2, var(--lilac))); box-shadow: 0 0 0 1.5px rgba(246,243,236,.2); transition: box-shadow .35s; }
.sx-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-face svg { position: absolute; inset: 22% 30%; width: 40%; height: 56%; color: var(--ink); }
.sx-q-tab[aria-selected="true"] .sx-face { box-shadow: 0 0 0 1.5px var(--paper); }
.sx-q-stage { display: grid; margin-top: clamp(32px, 4vw, 48px); }
.sx-q-fig { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px); filter: blur(6px); transition: opacity .5s var(--ease-out), transform .7s var(--ease-out), filter .5s var(--ease-out), visibility 0s linear .5s; }
.sx-q-fig[data-on] { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: .12s, .12s, .12s, 0s; }
.sx-q-fig blockquote { font-family: var(--font-display); font-weight: 350; letter-spacing: -.02em; line-height: 1.16; font-size: clamp(24px, 3vw, 44px); max-width: 30ch; font-variation-settings: "opsz" 144, "SOFT" 50; text-wrap: pretty; }
.sx-q-fig figcaption { margin-top: 28px; display: flex; align-items: center; gap: 14px; }
.sx-q-fig figcaption .sx-face { width: 48px; height: 48px; }
.sx-q-fig figcaption b { display: block; font-weight: 600; }
.sx-q-fig figcaption span.r { font-size: 14px; color: rgba(246,243,236,.62); }

/* worked-with row */
.sx-ww { margin-top: clamp(40px, 5vw, 56px); display: grid; gap: 18px; }
@media (min-width: 1024px) { .sx-ww { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 36px; } .sx-ww > .eyebrow { white-space: nowrap; } }
.sx-ww-mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.sx-ww-track { display: flex; width: max-content; animation: sx-mq 52s linear infinite; }
.sx-ww-list { display: flex; flex: none; gap: 34px; padding-right: 34px; list-style: none; margin: 0; }
.sx-ww-list li { display: flex; align-items: center; gap: 11px; white-space: nowrap; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.sx-ww-list img { width: 34px; height: 34px; border-radius: 99px; object-fit: cover; box-shadow: 0 0 0 1px rgba(20,18,16,.08); }
@keyframes sx-mq { to { transform: translateX(-50%); } }

/* =====================================================================
   3. BENTO
   ===================================================================== */
.sx-bento { display: grid; gap: 12px; margin-top: clamp(44px, 5vw, 64px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .sx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(300px, auto); grid-auto-flow: row dense; } }
@media (min-width: 1024px) { .sx-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(272px, auto); gap: 14px; } }
.sx-b { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 30px; padding: 26px 24px 24px; background: var(--cream); border: 1px solid var(--line); overflow: hidden; color: inherit; text-decoration: none; }
@media (min-width: 640px) { .sx-b { padding: 30px 30px 28px; } }
@media (hover: hover) and (pointer: fine) { a.sx-b:hover { border-color: rgba(20,18,16,.14); } } /* R8: only link cards darken their border */
.sx-b-h { font-family: var(--font-display); font-weight: 400; font-size: clamp(25px, 2.15vw, 31px); line-height: 1.05; letter-spacing: -.02em; font-variation-settings: "opsz" 144, "SOFT" 50; max-width: 16ch; }
.sx-b-num { font-family: var(--font-display); font-weight: 380; font-size: clamp(58px, 5.6vw, 86px); line-height: .95; letter-spacing: -.035em; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 144, "SOFT" 50; white-space: nowrap; }
.sx-b-l { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--mute); max-width: 32ch; }
.sx-b-vis { position: relative; margin-top: auto; padding-top: 22px; }
.sx-mono { font-family: var(--sx-mono); font-feature-settings: "zero" 0; letter-spacing: 0; }
.sx-ui { position: relative; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -30px rgba(20,18,16,.4); }

/* spans */
/* 9 cards, no hole at any width.
   2 cols: people | countries, followers | recs (2 rows) beside ats over hc | fast | the two doors.
   12 cols, 1024 to 1279: people 7 (2 rows) beside countries over followers | ats 7 over hc 7, recs 5 (2 rows) | fast 12 | doors 6 + 6.
   12 cols, 1280 up: same top | ats 4 and hc 4 over fast 8, recs 4 (2 rows) on the right | doors 6 + 6.
   hc needs about 360px before its challenge names truncate, which is why it only drops to 4 columns from 1280. */
@media (min-width: 640px) {
  .sx-b--people, .sx-b--fast { grid-column: span 2; }
  .sx-b--recs { grid-row: span 2; }
}
@media (min-width: 1024px) {
  .sx-b--people { grid-column: span 7; grid-row: span 2; }
  .sx-b--countries, .sx-b--followers { grid-column: span 5; }
  .sx-b--ats, .sx-b--hc { grid-column: span 7; }
  .sx-b--recs { grid-column: 8 / span 5; grid-row: span 2; }
  .sx-b--fast { grid-column: span 12; }
  .sx-b--programs, .sx-b--ai { grid-column: span 6; }
}
@media (min-width: 1280px) {
  .sx-b--ats, .sx-b--hc { grid-column: span 4; }
  .sx-b--recs { grid-column: 9 / span 4; }
  .sx-b--fast { grid-column: span 8; }
}

/* odometer: the value is .sx-vh text; strips are aria-hidden and drawn with pseudo-content (nothing to select or copy) */
.sx-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
[data-sx-odo] { position: relative; }
.sx-odo { display: inline-flex; -webkit-user-select: none; user-select: none; pointer-events: none; }
.sx-oc { position: relative; display: inline-block; height: 1.1em; line-height: 1.1; overflow: visible; clip-path: inset(0 -.35em); } /* R8: vertical mask only, glyphs keep their full width */
.sx-oc::before { content: attr(data-c); visibility: hidden; }
.sx-oc.p::before { visibility: visible; }
.sx-os { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; text-align: center; transform: translateY(0); }
.sx-os i { display: block; height: 1.1em; font-style: normal; }
.sx-os i::before { content: attr(data-d); }
.sx-odo-go .sx-os { transform: translateY(calc(var(--n) * -1.1em)); transition: transform var(--t, 900ms) cubic-bezier(.16, 1, .3, 1); }

/* text swap tick: one text node, a short rise */
.sx-tk { display: inline-block; animation: sx-tk .42s var(--ease-out); }
@keyframes sx-tk { from { opacity: 0; transform: translateY(5px); filter: blur(2px); } }

/* 1 people: living crowd (canvas) */
.sx-b--people .sx-b-num { font-size: clamp(64px, 8.2vw, 128px); }
.sx-b--people .sx-b-l { font-size: 16px; }
.sx-crowd { position: relative; flex: 1 1 auto; min-height: 186px; margin-top: 26px; -webkit-tap-highlight-color: transparent; }
@media (min-width: 640px) { .sx-crowd { min-height: 220px; } }
.sx-crowd canvas { position: absolute; inset: -16px; width: calc(100% + 32px); height: calc(100% + 32px); display: block; }
.sx-tip { position: absolute; z-index: 4; left: 0; top: 0; display: grid; grid-template-columns: 30px auto; gap: 1px 10px; align-items: center; padding: 8px 13px 8px 8px; border-radius: 14px; background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(20,18,16,.06), 0 16px 34px -16px rgba(20,18,16,.5); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, calc(-100% + 6px)) scale(.94); transform-origin: 50% 100%; transition: opacity .18s var(--ease-out), transform .42s var(--ease-spring); }
.sx-tip[data-on] { opacity: 1; transform: translate(-50%, -100%); }
.sx-tip[data-below] { transform-origin: 50% 0; transform: translate(-50%, -6px) scale(.94); }
.sx-tip[data-below][data-on] { transform: translate(-50%, 0); }
.sx-tip .av { grid-row: span 2; width: 30px; height: 30px; border-radius: 99px; overflow: hidden; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--ink);
  background: linear-gradient(135deg, var(--a0, var(--coral)), var(--a1, var(--rose)) 60%, var(--a2, var(--lilac))); }
.sx-tip .av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sx-tip b { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.sx-tip { width: max-content; }
.sx-tip .m { font-size: 12px; color: var(--mute); line-height: 1.25; white-space: normal; }

/* 2 countries: dot map with live local times */
.sx-b--countries .sx-b-vis { padding-top: 10px; }
.sx-map { display: block; width: 100%; height: auto; overflow: visible; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1); transition: transform 1s var(--ease-out); }
.sx-map[data-hover] { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1.045); }
.sx-map .land { fill: none; stroke: rgba(20,18,16,.17); stroke-width: 4.4; stroke-linecap: round; }
.sx-pin circle.c { fill: var(--ember); transform-box: fill-box; transform-origin: center; transition: transform .45s var(--ease-spring); }
.sx-pin[data-on] circle.c { transform: scale(1.35); }
.sx-pin circle.r { fill: none; stroke: var(--ember); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; }
.sx-pin text { font-family: var(--sx-mono); font-size: 19px; fill: var(--ink); paint-order: stroke; stroke: var(--cream); stroke-width: 6px; stroke-linejoin: round; opacity: 0; transition: opacity .35s var(--ease-out); }
.sx-pin text .tm { fill: var(--mute); }
.sx-pin[data-on] text { opacity: 1; }
.sx-pin[data-on] circle.r { animation: sx-ping 1.6s var(--ease-out) infinite; }
@keyframes sx-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }

/* 3 followers: faces wave at rest, fan out with subscriber counts on hover */
.sx-stack { display: flex; padding: 6px 0 0 12px; list-style: none; margin: 0; }
.sx-sf { position: relative; flex: none; margin-left: -12px; transition: margin .6s var(--ease-spring); }
.sx-sf img { width: 50px; height: 50px; border-radius: 99px; object-fit: cover; box-shadow: 0 0 0 3px var(--cream); opacity: 0; translate: 0 12px; scale: .8;
  transition: opacity .5s var(--ease-out), translate .8s var(--ease-spring), scale .8s var(--ease-spring); transition-delay: var(--d, 0ms); }
.sx-in .sx-sf img { opacity: 1; translate: 0 0; scale: 1; }
.sx-sf .c { display: block; margin-top: 7px; text-align: center; font-size: 11px; color: var(--ink-2); opacity: 0; transform: translateY(-4px); transition: opacity .25s var(--ease-out), transform .45s var(--ease-spring); -webkit-user-select: none; user-select: none; }
.sx-stack[data-awake] .sx-sf img { animation: sx-wave 7s var(--ease-out) infinite; animation-delay: calc(var(--i) * 140ms + 1.6s); }
@keyframes sx-wave { 0%, 14%, 100% { transform: none; } 6% { transform: translateY(-5px); } }
@media (hover: hover) and (pointer: fine) {
  .sx-b--followers:hover .sx-sf { margin-left: clamp(-12px, calc((100% - 362px) / 6), 8px); }
  .sx-b--followers:hover .sx-sf .c { opacity: 1; transform: none; transition-delay: calc(var(--i) * 35ms); }
  .sx-b--followers:hover .sx-stack .sx-sf img { animation: none; }
}
@media (hover: none) { .sx-sf .c { opacity: 1; transform: none; } }

/* 5 shortlist window */
.sx-sl { padding: 14px; }
.sx-ui-bar { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--mute); }
.sx-ui-bar .dots { display: flex; gap: 5px; }
.sx-ui-bar .dots i { width: 8px; height: 8px; border-radius: 99px; background: rgba(20,18,16,.12); }
.sx-ui-bar .t { font-weight: 500; color: var(--ink-2); }
.sx-sl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 14px; }
.sx-sl-head b { font-size: 15px; font-weight: 600; }
.sx-sl-head span { font-size: 12px; color: var(--mute); }
.sx-tl { position: relative; margin: 14px 2px 4px; }
.sx-tl-track { position: relative; height: 3px; border-radius: 3px; background: rgba(20,18,16,.08); overflow: visible; }
.sx-tl-fill { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: linear-gradient(90deg, var(--apricot), var(--coral)); transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease-out) .2s; }
.sx-tl-fill::after { content: ""; position: absolute; inset: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); transform: translateX(-120%); }
.sx-in .sx-tl-fill { transform: scaleX(1); }
.sx-in .sx-tl-fill::after { animation: sx-sheen 3.6s var(--ease-out) 2.2s infinite; }
@keyframes sx-sheen { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(360%); } }
.sx-tl-days { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--mute); }
.sx-tl-days span:last-child { color: var(--ink); font-weight: 600; }
.sx-tl-dot { position: absolute; top: -4px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1.5px var(--ink); left: 0; transition: left 1.4s var(--ease-out) .2s, background-color .3s 1.5s; }
.sx-tl-dot::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; box-shadow: 0 0 0 1.5px var(--ink); opacity: 0; }
.sx-in .sx-tl-dot { left: 100%; background: var(--ink); }
.sx-in .sx-tl-dot::after { animation: sx-halo 2.4s var(--ease-out) 2s infinite; }
@keyframes sx-halo { 0% { opacity: .5; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.4); } }
.sx-sl-clip { --rh: 68px; --rg: 8px; position: relative; overflow: hidden; margin-top: 14px; height: calc(4 * var(--rh) + 3 * var(--rg)); border-radius: 14px; }
.sx-sl-rows { display: grid; gap: var(--rg); transform: translateY(calc(-1 * (var(--rh) + var(--rg)))); transition: transform .7s var(--ease-spring); }
.sx-sl[data-new] .sx-sl-rows { transform: none; }
.sx-sl-row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; height: var(--rh); padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--paper);
  opacity: 0; transform: translateY(18px) scale(.96); transition: opacity .45s var(--ease-out), transform .9s var(--ease-spring), background-color .25s; transition-delay: var(--d, 0ms), var(--d, 0ms), 0ms; }
.sx-in .sx-sl-row { opacity: 1; transform: none; }
.sx-sl-row.is-new { background: #fff; box-shadow: inset 0 0 0 1px rgba(62,154,95,.28); }
.sx-sl-row > img { width: 44px; height: 52px; border-radius: 10px; object-fit: cover; object-position: 50% 30%; }
.sx-sl-row b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-sl-row .w { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; color: var(--mute); min-width: 0; }
.sx-sl-row .w img { width: 16px; height: 16px; border-radius: 99px; flex: none; }
.sx-sl-row .w span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-sl-row .new { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #2F7F4D; }
.sx-sl-row .new::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: #3E9A5F; box-shadow: 0 0 0 3px rgba(62,154,95,.18); }
/* R8: mock shortlist rows are not controls: no hover fill */

/* 6 trial */
.sx-trial { padding: 14px 14px 14px; }
.sx-trial-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.sx-trial-top .who { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-weight: 600; white-space: nowrap; }
.sx-trial-top .who img { width: 22px; height: 22px; border-radius: 99px; object-fit: cover; flex: none; }
.sx-trial-top .who .sx-mono { font-size: 11px; font-weight: 400; color: var(--mute); overflow: hidden; text-overflow: ellipsis; }
/* narrow UI (1000 to 1180 px, tablet): keep every line whole instead of truncating it */
.sx-sl, .sx-trial { container-type: inline-size; }
@container (max-width: 329px) { .sx-sl-row .new .nt { display: none; } .sx-sl-row .new { gap: 0; padding-right: 2px; } }
@container (max-width: 299px) { .sx-sl-row .ww { display: none; } }
@container (max-width: 319px) { .sx-trial-top .who .tp { display: none; } }
.sx-trial-top .st { flex: none; font-size: 12.5px; font-weight: 600; color: var(--ink-2); transition: color .3s; }
.sx-trial[data-ready] .st { color: #2F7F4D; }
.sx-segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.sx-segs div { position: relative; overflow: hidden; border-radius: 10px; background: var(--paper); padding: 9px 10px 15px; font-size: 11px; color: var(--mute); transition: background-color .35s; }
.sx-segs b { display: block; color: var(--ink); font-weight: 500; font-size: 12px; margin-bottom: 2px; }
.sx-segs [data-tx] { white-space: nowrap; }
.sx-segs div::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(20,18,16,.08); }
.sx-segs i { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--ease-out), background-color .3s; }
.sx-segs [data-s="1"] i { transform: scaleX(.62); background: var(--apricot); }
.sx-segs [data-s="2"] i { transform: scaleX(1); background: #3E9A5F; }
.sx-segs [data-s="2"] { background: #F1F6EF; }
.sx-segs [data-s="2"] [data-tx] { color: #2F7F4D; }

/* 7 invoice */
.sx-inv { padding: 14px 16px 12px; font-size: 13px; }
.sx-inv-top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--mute); }
.sx-inv-top b { color: var(--ink); font-weight: 600; font-family: var(--font-ui); font-size: 13px; }
.sx-inv-row { position: relative; display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px dashed rgba(20,18,16,.1);
  opacity: 0; transform: translateX(-8px); transition: opacity .45s var(--ease-out), transform .7s var(--ease-spring); transition-delay: var(--d, 0ms); }
.sx-inv-row::before { content: ""; position: absolute; inset: 1px -8px; border-radius: 8px; background: rgba(255,180,90,.16); opacity: 0; transition: opacity .3s var(--ease-out); z-index: -1; }
.sx-inv { isolation: isolate; }
.sx-inv-row[data-hl]::before { opacity: 1; }
.sx-inv-row .sx-dot { transition: transform .4s var(--ease-spring); }
.sx-inv-row[data-hl] .sx-dot { transform: scale(1.3); }
.sx-in .sx-inv-row { opacity: 1; transform: none; }
.sx-inv-row span.l { flex: 1; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-inv-tot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; font-weight: 600; }
.sx-inv-tot .sx-mono { font-size: 17px; display: inline-flex; }
/* R8: mock invoice rows are not controls: no hover highlight */

/* 9 contracts */
.sx-docs { display: grid; gap: 8px; }
.sx-doc { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: 14px; transition: transform .45s var(--ease-spring), border-color .3s; }
.sx-doc .ic { position: relative; flex: none; width: 24px; height: 24px; }
.sx-doc .ic svg { width: 24px; height: 24px; }
.sx-doc .ic circle { fill: none; stroke: rgba(20,18,16,.15); stroke-width: 1.5; }
.sx-doc .ic circle.f { stroke: #3E9A5F; stroke-dasharray: 64; stroke-dashoffset: 64; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .8s var(--ease-out); transition-delay: var(--d, 0ms); }
.sx-doc .ic path { fill: none; stroke: #2F7F4D; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .4s var(--ease-out); transition-delay: calc(var(--d, 0ms) + .55s); }
.sx-in .sx-doc .ic circle.f, .sx-in .sx-doc .ic path { stroke-dashoffset: 0; }
.sx-doc[data-pending] .ic circle.f { stroke: var(--apricot); stroke-dashoffset: 64; transition: none; }
.sx-doc[data-pending] .ic path { stroke-dashoffset: 14; transition: none; }
.sx-in .sx-doc[data-st="wait"] .ic circle.f { animation: sx-fill 5s linear forwards; }
@keyframes sx-fill { from { stroke-dashoffset: 64; } to { stroke-dashoffset: 6; } }
.sx-in .sx-doc[data-st="done"] .ic circle.f { stroke: #3E9A5F; stroke-dashoffset: 0; transition: stroke-dashoffset .35s var(--ease-out), stroke .3s; }
.sx-in .sx-doc[data-st="done"] .ic path { stroke-dashoffset: 0; transition: stroke-dashoffset .4s var(--ease-out) .25s; }
.sx-in .sx-doc[data-redraw] .ic circle.f { animation: sx-draw64 .6s var(--ease-out); }
.sx-in .sx-doc[data-redraw] .ic path { animation: sx-draw14 .7s var(--ease-out); }
@keyframes sx-draw64 { from { stroke-dashoffset: 64; } to { stroke-dashoffset: 0; } }
@keyframes sx-draw14 { 0%, 45% { stroke-dashoffset: 14; } 100% { stroke-dashoffset: 0; } }
.sx-doc b { font-weight: 550; flex: 1; min-width: 0; }
.sx-doc .sx-mono { font-size: 11.5px; color: var(--mute); white-space: nowrap; }
.sx-doc[data-st="done"] .sx-mono { color: #2F7F4D; }
/* R8: contract docs are not controls: no hover nudge */

/* 10 sso + security */
.sx-sso { display: grid; gap: 10px; }
@media (min-width: 640px) { .sx-b--sso .sx-sso { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 1023px) { .sx-b--sso .sx-sso { grid-template-columns: minmax(0, 1fr); } .sx-b--sso .sx-sso > :last-child { display: none; } }
.sx-sign { padding: 14px 16px; }
.sx-sign .lbl { font-size: 11.5px; color: var(--mute); }
.sx-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 8px 8px 8px 12px; border-radius: 10px; background: var(--paper); font-size: 13px; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .3s; }
.sx-field .v { display: flex; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; }
.sx-field .caret { flex: none; width: 1.5px; height: 15px; margin-left: 1px; background: var(--ink); animation: sx-blink 1.1s steps(1) infinite; }
.sx-field[data-typing] .caret { animation: none; }
.sx-field[data-typing] { box-shadow: inset 0 0 0 1px rgba(20,18,16,.18); }
@keyframes sx-blink { 50% { opacity: 0; } }
.sx-field .go { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: var(--mute); transition: background-color .3s, color .3s; }
.sx-field .go svg { width: 13px; height: 13px; }
.sx-field:not([data-typing]) .go { background: var(--ink); color: var(--paper); }
.sx-sign .via { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.sx-sign .via > span { min-width: 0; overflow-wrap: anywhere; }
.sx-sign .via svg { width: 14px; height: 14px; flex: none; overflow: visible; }
.sx-sign .via .shackle { transform: translateY(-1.6px); transition: transform .45s var(--ease-spring); }
.sx-sign .via[data-lock] .shackle { transform: none; }
.sx-sign .via[data-lock] { color: #2F7F4D; }
.sx-sec-list { padding: 12px 16px; }
.sx-sec-list .hd { display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sx-sec-list .hd b { color: var(--ink); font-weight: 600; }
.sx-sec-list ul { list-style: none; margin: 0; padding: 0; }
.sx-sec-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; font-size: 12.5px; color: var(--ink-2); border-bottom: 1px dashed rgba(20,18,16,.08); }
.sx-sec-list li:last-child { border-bottom: 0; }
.sx-sec-list li i { width: 16px; height: 16px; border-radius: 99px; flex: none; display: grid; place-items: center; background: rgba(62,154,95,.14); color: #2F7F4D; opacity: 0; scale: .5; transition: opacity .3s, scale .6s var(--ease-spring); transition-delay: var(--d, 0ms); }
.sx-sec-list li i svg { width: 9px; height: 9px; }
.sx-in .sx-sec-list li i { opacity: 1; scale: 1; }
.sx-sec-list[data-run] li i { animation: sx-tick .7s var(--ease-spring) both; animation-delay: var(--d, 0ms); }
@keyframes sx-tick { 0% { opacity: 0; scale: .4; } 100% { opacity: 1; scale: 1; } }

/* 11 + 12 doors: dark link cards */
.sx-b--door { background: #141210; color: var(--paper); border-color: #141210; min-height: 300px; isolation: isolate; cursor: pointer; }
.sx-b--door .gsurf, .sx-door-aura { position: absolute; z-index: -1; right: -18%; top: -40%; width: 78%; height: 150%; border-radius: 999px; filter: blur(56px); opacity: .55;
  transform: translate(var(--ax, 0px), var(--ay, 0px)) scale(1); transition: opacity .7s var(--ease-out), transform 1.2s var(--ease-out); }
.sx-b--door:hover .sx-door-aura { opacity: .85; transform: translate(var(--ax, -30px), var(--ay, 20px)) scale(1.08); }
.sx-b--door .sx-k { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: rgba(246,243,236,.7); }
.sx-b--door .sx-b-h { margin-top: 18px; font-size: clamp(28px, 2.6vw, 38px); max-width: 18ch; }
.sx-b--door .sx-b-h em { font-style: italic; }
.sx-b--door .sx-b-l { color: rgba(246,243,236,.66); }
.sx-b--door .sx-go { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 26px; font-weight: 500; font-size: 15px; }
.sx-b--door .sx-go svg { width: 16px; height: 16px; transition: transform .45s var(--ease-spring); }
.sx-b--door:hover .sx-go svg { transform: translateX(4px); }
.sx-b--door:active { transform: scale(.995); }
.sx-b--door:focus-visible { outline-color: var(--ink); outline-offset: 3px; }
.sx-b--door .sx-glow-dark { position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease-out);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--a0, var(--apricot)) 22%, transparent), transparent 62%); }
@media (hover: hover) and (pointer: fine) { .sx-b--door:hover .sx-glow-dark { opacity: 1; } }
/* the preview sits on the label line below 1024px, bottom right from 1024px */
.sx-door-art { position: absolute; right: 24px; top: 27px; pointer-events: none; }
@media (min-width: 640px) { .sx-door-art { right: 30px; top: 31px; } }
@media (min-width: 1024px) { .sx-door-art { top: auto; bottom: 30px; } }
.sx-cast { display: grid; grid-template-columns: repeat(10, 7px); gap: 5px; }
.sx-cast i { width: 7px; height: 7px; border-radius: 99px; background: rgba(246,243,236,.14); transition: background-color .4s var(--ease-out), transform .4s var(--ease-spring), box-shadow .3s; transition-delay: var(--d, 0ms), 0ms, 0ms; }
.sx-cast i:nth-child(n+11) { display: none; }
.sx-in .sx-cast i[data-on] { background: linear-gradient(135deg, var(--a0), var(--a1)); }
.sx-cast i[data-hl] { transform: scale(1.5); box-shadow: 0 0 0 1.5px rgba(246,243,236,.85); }
.sx-cast[data-all] i { background: linear-gradient(135deg, var(--a0), var(--a1)); transition-delay: var(--w, 0ms), 0ms, 0ms; }
.sx-cast-n { display: none; margin-top: 10px; font-size: 11px; color: rgba(246,243,236,.55); text-align: right; }
.sx-cast-n span { color: var(--paper); }
@media (min-width: 1024px) {
  .sx-cast { grid-template-columns: repeat(10, 10px); gap: 6px; }
  .sx-cast i { width: 10px; height: 10px; }
  .sx-cast i:nth-child(n+11) { display: block; }
  .sx-cast-n { display: block; }
}
.sx-reel { font-family: var(--sx-mono); text-align: right; color: rgba(246,243,236,.55); }
.sx-tc { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--paper); font-variant-numeric: tabular-nums; }
.sx-tc .rec { width: 6px; height: 6px; border-radius: 99px; background: #FF5A45; animation: sx-rec 1.6s steps(1) infinite; }
@keyframes sx-rec { 50% { opacity: .25; } }
.sx-reel[data-scrub] .sx-tc { color: #F7E296; }
.sx-notes { display: none; position: relative; height: 66px; margin-top: 8px; overflow: hidden; font-size: 11.5px; line-height: 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 100%); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 100%); }
.sx-notes > span { display: block; white-space: nowrap; height: 22px; transition: color .3s; }
.sx-notes[data-roll] > span { transform: translateY(-22px); transition: transform .55s var(--ease-out); }
.sx-notes > span:nth-child(3) { color: rgba(246,243,236,.85); }
.sx-notes > span:nth-child(n+4) { visibility: hidden; }
.sx-notes[data-roll] > span:nth-child(4) { visibility: visible; }
.sx-notes b { font-weight: 500; }
@media (min-width: 1024px) { .sx-notes { display: block; } }

/* ---------- reduced motion: opacity only ---------- */
@media (prefers-reduced-motion: reduce) {
  .sx-rv, .sx-sl-row, .sx-inv-row, .sx-q-fig, .sx-sf img, .sx-tk, .sx-sl-rows, .sx-map, .sx-doc, .sx-door-aura { transform: none !important; translate: none !important; scale: none !important; filter: none !important; }
  .sx-tip { transform: translate(-50%, -100%) !important; }
  .sx-tip[data-below] { transform: translate(-50%, 0) !important; }
  .sx-sl-rows { transform: translateY(calc(-1 * (var(--rh) + var(--rg)))) !important; }
  [data-sx-lines] .ln > span { transform: none !important; }
  .sx-tk { animation: sx-fade .3s linear; }
  @keyframes sx-fade { from { opacity: 0; } }
  .sx-tl-fill { transform: none !important; } .sx-tl-dot { left: 100% !important; background: var(--ink) !important; }
  .sx-tl-fill::after, .sx-tl-dot::after, .sx-pin[data-on] circle.r, .sx-stack .sx-sf img, .sx-cc-aura, .sx-pc-role .sx-dot::after { animation: none !important; }
  .sx-doc .ic circle.f, .sx-doc .ic path { stroke-dashoffset: 0 !important; animation: none !important; }
  .sx-segs i { transition: none !important; }
  .sx-ww-track { animation: none; } .sx-ww-mq { -webkit-mask-image: none; mask-image: none; }
  .sx-ww-list { flex-wrap: wrap; gap: 14px 26px; padding-right: 0; flex: 1; } .sx-ww-list[aria-hidden] { display: none; }
  .sx-pc-in, .sx-pc-ph img, .sx-cc-img img, .sx-cc-aura { transition: none !important; }
  .sx-track { transition: none !important; }
  .sx-tc .rec { animation: none; }
}

/* ---------- built by creators: alive at rest ---------- */
/* the auras breathe one creator after another, only while the row is on screen */
.sx-cw[data-awake] .sx-cc-aura { animation: sx-breathe 8.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.2s); }
.sx-cw .sx-cc:nth-child(1) { --i: 0; } .sx-cw .sx-cc:nth-child(2) { --i: 1; } .sx-cw .sx-cc:nth-child(3) { --i: 2; } .sx-cw .sx-cc:nth-child(4) { --i: 3; }
.sx-cw .sx-cc:nth-child(5) { --i: 4; } .sx-cw .sx-cc:nth-child(6) { --i: 5; } .sx-cw .sx-cc:nth-child(7) { --i: 6; }
@keyframes sx-breathe { 0%, 26%, 100% { opacity: .45; transform: none; } 12% { opacity: .85; transform: translateY(5px) scale(1.05); } }

.sx-cc-meta b { display: inline-flex; }
/* the duplicate marquee half is never selected or copied */
.sx-ww-list[aria-hidden] { -webkit-user-select: none; user-select: none; }
/* quotes swap in sequence: the outgoing quote is gone before the next one arrives */
/* r5: a crossfade with no empty frame. The outgoing quote fades in .22 s while the next one is already rising. */
.sx-q-fig { transition: opacity .22s var(--ease-out), transform .4s var(--ease-out), filter .22s var(--ease-out), visibility 0s linear .22s; }
.sx-q-fig[data-on] { transition: opacity .42s var(--ease-out), transform .6s var(--ease-out), filter .42s var(--ease-out), visibility 0s; transition-delay: .06s, .06s, .06s, 0s; }

/* ---------- people: role dots breathe while the slider is on screen ---------- */
.sx-pc-role .sx-dot { position: relative; }
.sx-pc-role .sx-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1.5px var(--a0, var(--coral)); opacity: 0; }
.sx-vp[data-awake] .sx-pc-role .sx-dot::after { animation: sx-halo 4.8s var(--ease-out) infinite; }
.sx-vp[data-awake] .sx-pc:nth-child(3n+2) .sx-pc-role .sx-dot::after { animation-delay: 1.6s; }
.sx-vp[data-awake] .sx-pc:nth-child(3n) .sx-pc-role .sx-dot::after { animation-delay: 3.2s; }
.sx-pc-with img { transition: transform .5s var(--ease-spring); }
/* R8: the worked-with avatar no longer spins on card hover (card is not a link) */

/* quote tab labels: full names from 640px, first names below */
.sx-n-short { display: none; }
@media (max-width: 639px) { .sx-n-full { display: none; } .sx-n-short { display: inline; } }

/* ================= R4: Sherry, in a cinematic frame =================
   When the tabs reach Sherry, her stage photo wipes in from the right, graded to the panel (cooled,
   darkened, tinted with the teal and violet of the screen behind her), and pushes in slowly for the
   whole time her quote is up. The panel's aura takes the photo's colors, so the light seems to leak
   from the picture into the gradient. Leaving: a quick fade, then the frame resets out of sight. */
.sx-q-cine { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sx-q-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; overflow: hidden; opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%);
  clip-path: inset(0 0 0 100%);
  transition: opacity .45s var(--ease-out), clip-path 0s linear .5s; }
.sx-q-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 14%; max-width: none;
  filter: saturate(.78) contrast(1.08) brightness(.8); transform: scale(1.04); transform-origin: 56% 22%;
  transition: transform 0s linear .5s; }
/* the grade: cool shadows, the screen's teal and violet in the highlights, ink falling off at the bottom */
.sx-q-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: soft-light;
  background: linear-gradient(200deg, rgba(156,107,219,.75) 0%, rgba(47,191,159,.55) 45%, rgba(20,18,16,.6) 100%); }
.sx-q-photo::after { content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(0deg, rgba(20,18,16,.92) 0%, rgba(20,18,16,0) 34%), radial-gradient(120% 90% at 70% 30%, transparent 55%, rgba(20,18,16,.55) 100%); }
.sx-q[data-cine] .sx-q-photo { opacity: 1; clip-path: inset(0 0 0 0); transition: opacity .32s var(--ease-out), clip-path .95s cubic-bezier(.2,.75,.2,1); }
.sx-q[data-cine] .sx-q-photo img { transform: scale(1.17); transition: transform 11s cubic-bezier(.25,.55,.35,1); }
.sx-q[data-cine] .sx-q-aura { opacity: .78; }
/* a credit line on the frame, like the lower third of a film still */
.sx-q-fig--cine figcaption { position: relative; padding-left: 18px; }
.sx-q-fig--cine figcaption::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #6FD3E0, #9C6BDB); }
.sx-q-fig--cine figcaption .sx-face { display: none; }
.sx-q-fig--cine figcaption b { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2vw, 26px); letter-spacing: -.015em; line-height: 1.1; font-variation-settings: "opsz" 144, "SOFT" 50; }
.sx-q-fig--cine figcaption span.r { display: block; margin-top: 4px; font-size: 13px; letter-spacing: .02em; line-height: 1.45; }
@media (min-width: 900px) { .sx-q-fig--cine blockquote { max-width: 52%; font-size: clamp(24px, 2.55vw, 38px); } }
/* tablets and phones: the frame takes the lower right corner, beside the caption, under the quote */
@media (max-width: 899px) {
  .sx-q-photo { top: auto; width: 54%; height: 46%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(0deg, #000 62%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(0deg, #000 62%, transparent 100%); mask-composite: intersect; }
  .sx-q-photo img { object-position: 50% 6%; }
  .sx-q-fig--cine figcaption { max-width: 50%; }
}
@media (min-width: 640px) and (max-width: 899px) { .sx-q-photo { width: 40%; height: 52%; } }
@media (max-width: 639px) { .sx-q-photo { height: 39%; } }
@media (prefers-reduced-motion: reduce) {
  .sx-q-photo, .sx-q[data-cine] .sx-q-photo { clip-path: none; transition: opacity .3s linear; }
  .sx-q-photo img, .sx-q[data-cine] .sx-q-photo img { transform: none; transition: none; }
}

/* r5: a spliced headline stays hidden until sections.js (deferred) has split it into line masks, so a first paint
   taken before that never shows it whole and then hides and rises it again. 2.5 s failsafe if the script never runs.
   html.pgt-js comes from the inline head snippet. */
html.pgt-js [data-sx-lines]:not([data-sx-split]) { visibility: hidden; animation: sx-unhide 0s linear 2.5s forwards; }
@keyframes sx-unhide { to { visibility: visible; } }

/* =====================================================================
   R5: true facts only. AI recommendations (ranked), applicant tracking,
   hiring challenges, 72 hours. Each card keeps a slow resting
   detail and a fast, specific hover reaction.
   ===================================================================== */
.sx-pc-link { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sx-pc-link:hover { background-size: 100% 1px; } }
.sx-pc-link:focus-visible { outline-offset: 2px; }

/* recommendations: a live line instead of a 72 hour timeline, a match score on each row */
.sx-sl-live { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 10px; border-radius: 10px; background: var(--paper); font-size: 12px; color: var(--ink-2); }
.sx-sl-live .sx-mono { margin-left: auto; font-size: 11px; color: var(--mute); }
.sx-live-dot { position: relative; width: 7px; height: 7px; border-radius: 99px; background: #3E9A5F; flex: none; }
.sx-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1.5px #3E9A5F; opacity: 0; }
.sx-in .sx-live-dot::after { animation: sx-halo 2.4s var(--ease-out) 1.2s infinite; }
.sx-sl-row .m { font-size: 12px; color: var(--ink-2); padding-right: 2px; }
.sx-sl-row .m::before { content: ""; display: inline-block; width: 18px; height: 2px; margin: 0 7px 3px 0; border-radius: 2px; background: linear-gradient(90deg, var(--coral), var(--apricot)); vertical-align: middle; }
@container (max-width: 329px) { .sx-sl-row .m::before { display: none; } }

/* applicant tracking: one applicant moves through the stages, the counts follow */
.sx-pipe { padding: 12px 12px 12px; }
.sx-pipe-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sx-pipe-cols > div { position: relative; border-radius: 10px; background: var(--paper); padding: 8px 9px 9px; transition: background-color .35s; }
.sx-pipe-cols .h { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.sx-pipe-cols b { display: inline-block; margin-top: 3px; font-size: 18px; font-weight: 500; color: var(--ink); }
.sx-pipe-cols > div[data-hot] { background: #FFF3E4; }
.sx-pipe-cols > div:last-child[data-hot] { background: #EEF6EA; }
.sx-pipe-lane { position: relative; height: 34px; margin-top: 8px; }
.sx-pipe-chip { position: absolute; top: 0; left: 0; width: calc((100% - 12px) / 3); height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 8px; border-radius: 10px; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 8px 18px -12px rgba(20,18,16,.45);
  font-size: 12px; font-weight: 550; white-space: nowrap; overflow: hidden; transform: translateX(calc(var(--c, 0) * (100% + 6px))); transition: transform .8s var(--ease-spring), border-color .3s; }
.sx-pipe-chip .av { width: 20px; height: 20px; border-radius: 99px; flex: none; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #7FBDF2, #B49CF2); }
.sx-pipe-chip .nm { overflow: hidden; text-overflow: ellipsis; }
.sx-pipe[data-offer] .sx-pipe-chip { border-color: rgba(62,154,95,.45); }
.sx-pipe-note { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.sx-pipe-note .k { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); flex: none; }
.sx-pipe-note [data-note] { overflow: hidden; text-overflow: ellipsis; }

/* hiring challenges: the two real challenges, with what came out of each */
.sx-hcl .sx-inv-row img { width: 28px; height: 28px; border-radius: 9px; object-fit: cover; flex: none; }
.sx-hcl .sx-inv-row span.l b { font-weight: 600; color: var(--ink); }
.sx-hcl .sx-inv-row .sx-mono { font-size: 15px; display: inline-flex; }
.sx-hcl-out { justify-content: flex-start !important; gap: 8px; font-weight: 500 !important; font-size: 12.5px; color: var(--ink-2); }
.sx-hcl-ck { width: 18px; height: 18px; border-radius: 99px; display: grid; place-items: center; background: rgba(62,154,95,.14); color: #2F7F4D; flex: none; }
.sx-hcl-ck svg { width: 10px; height: 10px; }
.sx-hcl-out [data-sx-hcl-out] { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* under 24 hours: a job post types itself, the steps tick, the clock runs to 23h 38m */
.sx-fast { display: grid; gap: 10px; }
@media (min-width: 640px) { .sx-b--fast .sx-fast { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 639px) { .sx-b--fast .sx-fast > :first-child { display: none; } }
.sx-fast .via .hand { transform-origin: 7px 7px; transition: transform .8s var(--ease-spring); }
.sx-fast .via[data-lock] .hand { transform: rotate(300deg); }
.sx-fast .via[data-lock] { color: #2F7F4D; }
.sx-fast .sx-sec-list li > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-fast .sx-sec-list li .t { font-size: 11px; color: var(--mute); }
.sx-fast .sx-sec-list .hd .sx-mono { color: var(--ink); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .sx-pipe-chip { transition: opacity .3s linear !important; }
  .sx-live-dot::after { animation: none !important; }
}

/* merged recommendations + ranking card: keep the title from leaving one word on its own line */
.sx-b--recs .sx-b-h { text-wrap: balance; }