/* SUBTXT v1 rev2 (build-site-v1.py). Direction: broadcast control room — mono, asymmetric splits,
   Helvetica caps headlines vs Special Gothic Expanded accents, a live clip wall. Centred only for nothing. */
:root { --g: clamp(20px, 4vw, 64px); --rule: #ffffff24; }
.sx-v1 .fl-container { max-width: 1320px; margin: 0 auto; padding: 0 var(--g); }
.sx-h, .sx-engine__title, .lps__title, .pr__title, .ov2 h2 { text-align: left !important; }
.sx-body { color: #b9b9b9; font: 400 clamp(16px, 1.25vw, 19px)/1.55 var(--sx-sans); margin: 0 0 20px; max-width: 620px; }
.sx-link { color: #fff; text-decoration: none; border-bottom: 1px solid #ffffff55; padding-bottom: 2px; font-weight: 500; }
.sx-link:hover { border-color: #fff; }
.sx-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px;
  font: 500 12px/1 var(--sx-sans); letter-spacing: .12em; text-transform: uppercase; color: #e6e6e6; margin-bottom: 28px; }
.sx-pill i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff; animation: sx-blink 1.6s infinite; }
@keyframes sx-blink { 50% { opacity: .25; } }
.sx-btn--solid { display: inline-flex; gap: 10px; align-items: center; background: #fff; color: #000 !important; border-radius: 999px;
  padding: 16px 26px; font: 600 16px/1 var(--sx-sans); text-decoration: none; transition: transform .2s; }
.sx-btn--solid:hover { transform: translateY(-2px); }
/* nav */
.sx-nav--v1 { display: flex; align-items: center; gap: clamp(12px, 2vw, 32px); }
.sx-nav__links { display: flex; gap: clamp(12px, 1.6vw, 28px); pointer-events: auto; }
.sx-nav__links a { text-decoration: none; opacity: .7; } .sx-nav__links a:hover, .sx-nav__links a[aria-current] { opacity: 1; }
.sx-nav .sx-nav__cta { margin-left: auto; text-decoration: none; background: #fff; color: #000 !important; border-radius: 999px; padding: 8px 16px; pointer-events: auto; font-weight: 600; }
.sx-nav--v1 .sx-nav__corner--r { margin-left: 0; }
.sx-menu { display: none; pointer-events: auto; position: relative; }
.sx-menu summary { list-style: none; cursor: pointer; border: 1px solid currentColor; border-radius: 999px; padding: 6px 14px; }
.sx-menu summary::-webkit-details-marker { display: none; }
.sx-menu nav { position: absolute; right: 0; top: calc(100% + 8px); display: flex; flex-direction: column; gap: 12px; background: #0d0d0d; border: 1px solid #ffffff1f; border-radius: 16px; padding: 16px 20px; min-width: 200px; }
.sx-menu nav a { text-decoration: none; color: #fff; }
@media (max-width: 860px) { .sx-nav__links { display: none; } .sx-menu { display: block; margin-left: auto; } .sx-nav .sx-nav__cta { display: none; } }
/* hero */
.sx-hero2 { position: relative; overflow: hidden; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 64px; }
.sx-hero2__ghost { position: absolute; left: -2vw; bottom: -6vw; font: 400 26vw/0.8 var(--sx-display); color: transparent;
  -webkit-text-stroke: 1px #ffffff1c; white-space: nowrap; pointer-events: none; }
.sx-hero2__grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 72px); align-items: center; width: 100%; }
.sx-hero2__h1 { font: 700 clamp(48px, 7.4vw, 124px)/.84 var(--sx-sans); letter-spacing: -.055em; text-transform: uppercase; margin: 0; }
.sx-hero2__h1 em { display: block; font: 400 .74em/1 var(--sx-display); font-style: normal; letter-spacing: -.02em; margin-top: .12em;
  background: linear-gradient(90deg, #fff 0 60%, #8d8d8d); -webkit-background-clip: text; color: transparent; }
.sx-hero2__sub { color: #b9b9b9; font: 400 clamp(16px, 1.3vw, 20px)/1.5 var(--sx-sans); max-width: 540px; margin: 28px 0 32px; }
.sx-hero2__cta { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.sx-ticks { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; color: #8d8d8d; font-size: 14px; }
.sx-ticks li::before { content: "✦"; margin-right: 8px; color: #fff; }
.sx-hero2__copy > * { animation: sx-rise .9s cubic-bezier(.22,1,.36,1) both; }
.sx-hero2__copy > :nth-child(2) { animation-delay: .08s; } .sx-hero2__copy > :nth-child(3) { animation-delay: .16s; }
.sx-hero2__copy > :nth-child(4) { animation-delay: .24s; } .sx-hero2__copy > :nth-child(5) { animation-delay: .32s; }
@keyframes sx-rise { from { opacity: 0; transform: translateY(24px); } }
.sx-wall { position: relative; height: min(78vh, 720px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; overflow: hidden;
  -webkit-mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.sx-wall__track { display: flex; flex-direction: column; gap: 16px; animation: sx-up 38s linear infinite; }
.sx-wall__col--1 .sx-wall__track { animation-direction: reverse; animation-duration: 44s; margin-top: -80px; }
@keyframes sx-up { to { transform: translateY(-50%); } }
.sx-clip { position: relative; margin: 0; aspect-ratio: 9/16; border-radius: 22px; overflow: hidden; background: #0d0d0d; border: 1px solid #ffffff14; }.sx-clip img, .sx-clip video.sx-clip__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.15) contrast(1.05); }
.sx-clip__ph { position: absolute; inset: 0; background: radial-gradient(120% 80% at 30% 20%, #2a2a2a, #0b0b0b 70%); }
.sx-clip__ph::after { content: ""; position: absolute; left: 50%; top: 45%; width: 0; height: 0; transform: translate(-30%, -50%);
  border-left: 22px solid #ffffffcc; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.sx-clip__ph::before { content: ""; position: absolute; left: 12px; right: 12px; top: 14px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #fff 0 38%, #ffffff33 38%); }
.sx-clip figcaption { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 999px;
  background: #000000b3; backdrop-filter: blur(8px); font: 600 11px/1 var(--sx-sans); letter-spacing: .08em; text-transform: uppercase; }
.sx-clip figcaption i { width: 6px; height: 6px; border-radius: 50%; background: #ff3b30; }
.sx-wall__stat { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-4deg); background: #fff; color: #000;
  padding: 18px 22px; border-radius: 18px; box-shadow: 0 30px 60px #000a; min-width: 220px; }
.sx-wall__stat strong { display: block; font: 700 48px/.9 var(--sx-sans); letter-spacing: -.05em; }
.sx-wall__stat span { font: 500 13px/1.3 var(--sx-sans); color: #444; }
@media (max-width: 960px) { .sx-hero2__grid { grid-template-columns: 1fr; } .sx-wall { height: 460px; } .sx-hero2 { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .sx-wall__track, .sx-hero2__copy > *, .sx-pill i { animation: none; } }
/* proof bar */
.sx-proofbar { padding: 0 0 clamp(48px, 7vw, 96px); }
.sx-proofbar__inner { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 56px; background: #0d0d0d; border: 1px solid #ffffff14;
  border-radius: 24px; padding: 28px clamp(20px, 3vw, 40px); }
.sx-proofbar p { margin: 0; display: flex; align-items: baseline; gap: 10px; color: #8d8d8d; }
.sx-proofbar strong { color: #fff; font: 700 clamp(26px, 2.4vw, 38px)/1 var(--sx-sans); letter-spacing: -.04em; }
.sx-proofbar .sx-link { margin-left: auto; }
/* split statements */
.sx-split { padding: clamp(72px, 9vw, 150px) 0; border-top: 1px solid #ffffff10; }
.sx-split__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(24px, 5vw, 96px); align-items: start; }
.sx-split__h { margin: 0 !important; }
.sx-split__body { padding-top: 6px; }
@media (max-width: 860px) { .sx-split__grid { grid-template-columns: 1fr; } }
/* buried-moment timeline */
.sx-timeline { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 28px; color: #8d8d8d; font: 500 12px var(--sx-sans); position: relative; }
.sx-timeline__bar { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; height: 56px; }
.sx-timeline__bar i { background: #1a1a1a; border-radius: 4px; }
.sx-timeline__bar i.is-moment { background: #fff; box-shadow: 0 0 24px #ffffffaa; transform: scaleY(1.25); }
.sx-timeline__tag { justify-self: center; color: #fff; letter-spacing: .1em; text-transform: uppercase; }
/* columns */
.sx-cols { display: grid; gap: clamp(20px, 3vw, 48px); margin-top: clamp(40px, 5vw, 72px); }
.sx-cols--3 { grid-template-columns: repeat(3, 1fr); } .sx-cols--4 { grid-template-columns: repeat(4, 1fr); }
.sx-col { border-top: 1px solid var(--rule); padding-top: 22px; }
.sx-col__n { display: block; font: 400 13px var(--sx-display); color: #8d8d8d; margin-bottom: 18px; }
.sx-col h3 { margin: 0 0 10px; font: 700 clamp(19px, 1.5vw, 24px)/1.15 var(--sx-sans); letter-spacing: -.02em; }
.sx-col p { margin: 0; color: #b9b9b9; line-height: 1.55; }
.sx-col p a { color: #fff; }
.sx-cols--big h3 { font-size: clamp(24px, 2.4vw, 38px); letter-spacing: -.04em; text-transform: uppercase; }
@media (max-width: 960px) { .sx-cols--3, .sx-cols--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sx-cols--3, .sx-cols--4 { grid-template-columns: 1fr; } }
.sx-bento--left { margin: clamp(40px, 5vw, 72px) 0 0 !important; }
/* clip direction (rail) */
.sx-cd .sx-split__grid { margin-bottom: clamp(48px, 6vw, 96px); }
.sx-cd .lps__title { font-size: clamp(40px, 5vw, 80px) !important; }
.sx-cd .lps__grid { grid-template-columns: 1fr; }
.sx-cd .lps-step { padding: 9vh 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(24px, 5vw, 96px); align-items: start; }
.sx-cd .lps-step > * { grid-column: 1; } .sx-cd .lps-step > .lps-step__card { grid-column: 2; grid-row: 1 / span 3; }
.sx-cd .lps-step:first-child { padding-top: 2vh; }
@media (max-width: 860px) { .sx-cd .lps-step { grid-template-columns: 1fr; } .sx-cd .lps-step > .lps-step__card { grid-column: 1; grid-row: auto; } }
.sx-nav__join { text-decoration: none; border: 1px solid #ffffff66; border-radius: 999px; padding: 7px 14px; pointer-events: auto; }
.sx-nav__join:hover, .sx-nav__join[aria-current] { border-color: #fff; }
@media (max-width: 860px) { .sx-nav__join { display: none; } }
.sx-joinband { padding: 0 0 clamp(48px, 6vw, 96px); }
.sx-joinband__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px);
  border-radius: 28px; background: #fff; color: #000; text-decoration: none; transition: transform .25s; }
.sx-joinband__inner:hover { transform: translateY(-3px); }
.sx-joinband__q { font: 700 clamp(30px, 4.4vw, 72px)/.9 var(--sx-sans); letter-spacing: -.05em; text-transform: uppercase; }
.sx-joinband__a { font: 400 clamp(16px, 1.6vw, 24px) var(--sx-display); }
.sx-pagehead .sx-body { margin-top: 28px; }
.spotlight .fl-btn--red { background: #fff !important; color: #000 !important; box-shadow: none !important; border-radius: 999px !important; }
/* ---- rev3: brand pops (Figma Branding Draft 0:1: magenta #ff00ff, lime #84ff00) ---- */
:root { --pop-m: #ff00ff; --pop-l: #84ff00; }
.sx-pill i { background: var(--pop-l); box-shadow: 0 0 14px var(--pop-l); }
.sx-hero2__h1 em { background: linear-gradient(90deg, #fff 0 45%, var(--pop-m) 75%, var(--pop-l)); -webkit-background-clip: text; background-clip: text; }
.sx-clip figcaption i { background: var(--pop-m); }
.sx-wall__stat { background: var(--pop-l); } .sx-wall__stat span { color: #1a1a1a; }
.sx-ticks li::before { color: var(--pop-l); }
.sx-ticks__star { font-style: normal; color: var(--pop-l); margin: 0 4px; } .sx-ticks__seg { white-space: nowrap; }
.sx-link:hover { border-color: var(--pop-m); }
.sx-timeline__bar i.is-moment { background: var(--pop-m); box-shadow: 0 0 28px var(--pop-m); }
.sx-timeline__tag { color: var(--pop-m); }
.sx-col__n { color: var(--pop-l); }
.sx-joinband__inner { background: var(--pop-l); }
.sx-pill { border-color: #ffffff2e; }
/* hero ghost: whole word fits the viewport */
.sx-hero2__ghost { left: 50%; transform: translateX(-50%); font-size: 18.5vw; bottom: -3.4vw; }
/* steps: edit-timeline device (frame ticks + playhead + timecodes), replaces the dotted rail */
.sx-cd .sx-rail__track, .sx-cd .sx-rail__fill { border-radius: 0; left: 44px; }
.sx-cd .sx-rail__track { width: 18px; background: linear-gradient(#ffffff38, #ffffff38) 8px 0 / 2px 100% no-repeat,
  repeating-linear-gradient(to bottom, #ffffff30 0 1px, transparent 1px 14px) 0 0 / 18px 100%, repeating-linear-gradient(to bottom, #ffffff60 0 1px, transparent 1px 70px) 0 0 / 18px 100%; }
.sx-cd .sx-rail__fill { width: 18px; background: linear-gradient(var(--pop-m), var(--pop-l)) 7px 0 / 4px 100% no-repeat; filter: drop-shadow(0 0 10px #ff00ff88); }
.sx-cd .sx-rail__fill::after { content: ""; position: absolute; left: 1px; bottom: -8px; width: 16px; height: 16px; background: var(--pop-l); transform: rotate(45deg); box-shadow: 0 0 18px var(--pop-l); }
.sx-cd .sx-node { border-radius: 4px; padding: 8px 12px; font: 600 13px/1 var(--sx-sans); letter-spacing: .08em; text-transform: uppercase; gap: 10px; }
.sx-cd .sx-node i { width: auto; height: auto; border-radius: 0; background: none; font: 500 12px/1 ui-monospace, Menlo, monospace; color: #8d8d8d; letter-spacing: 0; }
.sx-cd .sx-node.is-current { background: var(--pop-l); color: #000; box-shadow: 0 0 24px #84ff0055; } .sx-cd .sx-node.is-current i { color: #000; }
/* race: body as headline */
.sx-race__body { font: 700 clamp(20px, 2.3vw, 36px)/1.02 var(--sx-sans); letter-spacing: -.035em; text-transform: uppercase; color: #fff; width: min(900px, 88vw); }
/* scoreboard (replaces bentos) */
.sx-board { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; margin-top: clamp(40px, 5vw, 72px);
  border: 1px solid #ffffff1f; border-radius: 28px; overflow: hidden; background: #070707; }
.sx-board__cell { position: relative; padding: clamp(22px, 2.6vw, 40px); min-height: 220px; display: flex; flex-direction: column; justify-content: space-between;
  border-right: 1px solid #ffffff14; border-bottom: 1px solid #ffffff14; overflow: hidden; }
.sx-board__cell--pop { grid-row: span 2; background: var(--pop-l); color: #000; border: 0; }
.sx-board__cell:nth-child(3), .sx-board__cell:nth-child(4) { border-right: 0; }
.sx-board__cell:nth-child(3) { border-right: 0; } .sx-board__cell:nth-child(4) { grid-column: 2 / span 2; border-bottom: 0; }
.sx-board__lbl { display: inline-flex; gap: 8px; align-items: center; font: 600 12px/1 var(--sx-sans); letter-spacing: .12em; text-transform: uppercase; color: #8d8d8d; }
.sx-board__lbl i { width: 7px; height: 7px; border-radius: 50%; background: var(--pop-m); animation: sx-blink 1.6s infinite; }
.sx-board__cell--pop .sx-board__lbl { color: #000; } .sx-board__cell--pop .sx-board__lbl i { background: #000; }
.sx-board__cell strong { position: relative; z-index: 1; font: 700 clamp(56px, 7vw, 120px)/.85 var(--sx-sans); letter-spacing: -.06em; margin-top: 28px; }
.sx-board__cell--pop strong { font-size: clamp(80px, 11vw, 190px); }
.sx-board__bars { position: absolute; right: clamp(20px, 2.6vw, 40px); top: clamp(20px, 2.6vw, 40px); display: flex; align-items: flex-end; gap: 5px; height: 34%; opacity: .9; }
.sx-race__body { color: #fff !important; }
.sx-board__bars i { width: 8px; height: var(--h); background: #ffffff22; border-radius: 2px; transform-origin: bottom; animation: sx-bar 2.4s ease-in-out infinite alternate; }
.sx-board__bars i:last-child { background: var(--pop-m); }
.sx-board__cell--pop .sx-board__bars i { background: #00000026; width: 12px; } .sx-board__cell--pop .sx-board__bars i:last-child { background: #000; }
@keyframes sx-bar { from { transform: scaleY(.82); } }
@media (max-width: 860px) { .sx-board { grid-template-columns: 1fr 1fr; } .sx-board__cell--pop { grid-column: 1 / -1; grid-row: auto; } .sx-board__cell:nth-child(4) { grid-column: 1 / -1; } }
.sx-cols--parts .sx-col h3::before { content: "✦ "; color: var(--pop-m); }
/* ---- rev4 ---- */
/* nav: no blend; solid glass bar so the menu never takes the colour of what's under it */
.sx-nav--v1 { mix-blend-mode: normal !important; background: #000000b8; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid #ffffff12; padding-top: 14px !important; padding-bottom: 14px !important; }
.sx-menu summary { color: #fff; background: #000; border-color: #ffffff66; font-weight: 600; }
.sx-menu[open] summary { background: #fff; color: #000; }
.sx-menu nav { position: fixed; left: 12px; right: 12px; top: 72px; min-width: 0; gap: 4px; padding: 14px; background: #0b0b0b; border-radius: 22px; box-shadow: 0 30px 80px #000c; }
.sx-menu nav a { display: block; padding: 12px 10px; font: 700 22px/1 var(--sx-sans); letter-spacing: -.03em; text-transform: uppercase; border-bottom: 1px solid #ffffff12; }
.sx-menu nav a[href="/join/"] { color: #fff; }  /* white: lime is reserved for the current page (Matt 2026-11-10) */
.sx-menu nav a[href="/brief/"] { margin-top: 10px; border: 0; text-align: center; background: #fff; color: #000; border-radius: 999px; padding: 16px; font-size: 16px; letter-spacing: 0; }
/* race: clean star (no black box, no glow); copy styled like the column heads, with a star highlight */
.race__car.sx-star--clean { filter: none !important; width: clamp(140px, 20vw, 320px) !important; z-index: 1 !important; }
.race__line, .sx-race__body { z-index: 3; position: relative; }
.sx-race__body { font: 700 clamp(19px, 1.6vw, 24px)/1.25 var(--sx-sans) !important; letter-spacing: -.02em !important; text-transform: none !important; width: min(640px, 86vw) !important; }
.sx-race__body::before { content: "✦ "; color: var(--pop-m); }
/* mobile fixes */
.spotlight, .sx-network, .sx-hero2 { overflow: hidden; }
@media (max-width: 860px) {
  .sx-cd .lps__steps { padding-left: 56px; }
  .sx-cd .sx-rail { width: 40px; } .sx-cd .sx-rail__track, .sx-cd .sx-rail__fill { left: 11px; }
  .sx-cd .sx-node { left: -56px; width: 40px; height: 22px; padding: 0; font-size: 0; justify-content: center; }
  .sx-cd .sx-node i { display: none; }
  .sx-cd .sx-node::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .sx-cd .lps-step { padding: 7vh 0; }
  .sx-hero2 { padding-top: 104px; } .sx-hero2__h1 { font-size: clamp(44px, 13vw, 64px); }
  .sx-wall { height: 380px; } .sx-wall__stat { min-width: 180px; } .sx-wall__stat strong { font-size: 36px; }
  .sx-proofbar__inner { gap: 14px 28px; } .sx-proofbar .sx-link { margin-left: 0; }
  .sx-board__cell { min-height: 160px; } .sx-board__cell strong { font-size: clamp(44px, 12vw, 64px); } .sx-board__cell--pop strong { font-size: clamp(64px, 18vw, 96px); }
  .sx-close__h { font-size: clamp(44px, 13vw, 72px); }
  .sx-timeline__bar { height: 40px; gap: 3px; }
}
/* rev4b: no gradients (Matt) — flat pops only */
.sx-hero2__h1 em { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--pop-m) !important; -webkit-text-fill-color: var(--pop-m) !important; }
.sx-cd .sx-rail__fill { background: linear-gradient(var(--pop-l), var(--pop-l)) 7px 0 / 4px 100% no-repeat !important; filter: none !important; }
.sx-report__row i { background: var(--pop-l) !important; }
.sx-clip__ph { background: #141414 !important; }
.sx-timeline__bar i.is-moment, .sx-pill i, .sx-wall__stat, .sx-cd .sx-node.is-current, .sx-cd .sx-rail__fill::after { box-shadow: none !important; }
/* rev5: green primary, pink secondary */
.sx-hero2__h1 em { color: var(--pop-l) !important; -webkit-text-fill-color: var(--pop-l) !important; }
.race__line--2 { color: #fff !important; }
.sx-board__cell:nth-child(4) { grid-column: auto !important; border-bottom: 0; border-right: 1px solid #ffffff14 !important; }
.sx-board__cell:nth-child(3) { border-right: 0 !important; } .sx-board__cell:nth-child(5) { border-right: 0 !important; border-bottom: 0; }
.sx-board__cell:nth-child(5) strong { color: var(--pop-m); }
@media (max-width: 860px) { .sx-board__cell:nth-child(4), .sx-board__cell:nth-child(5) { grid-column: auto !important; } }
/* report mock */
.sx-report { margin-top: clamp(40px, 5vw, 72px); background: #0d0d0d; border: 1px solid #ffffff14; border-radius: 24px; padding: 28px; max-width: 760px; margin-left: auto; }
.sx-report__head { display: flex; justify-content: space-between; color: #8d8d8d; font: 500 12px var(--sx-sans); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px; }
.sx-report__row { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid #ffffff10; color: #e6e6e6; }
.sx-report__row i { height: 10px; border-radius: 6px; width: var(--w); background: linear-gradient(90deg, var(--pop-m), var(--pop-l)); }
/* close */
.sx-close { position: relative; overflow: hidden; padding: clamp(90px, 12vw, 200px) 0; border-top: 1px solid #ffffff10; }
.sx-close__grid { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; }
.sx-close__h { margin: 0; font: 700 clamp(52px, 8vw, 140px)/.82 var(--sx-sans); letter-spacing: -.055em; text-transform: uppercase; }
.sx-close__ghost { position: absolute; right: -4vw; top: -10vw; font: 400 18vw/1 var(--sx-display); color: transparent; -webkit-text-stroke: 1px #ffffff12; z-index: -1; }
@media (max-width: 860px) { .sx-close__grid { grid-template-columns: 1fr; } }
/* page heads */
.sx-pagehead { padding: clamp(140px, 15vw, 220px) 0 clamp(48px, 6vw, 96px); }
.sx-pagehead__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 5vw, 96px); align-items: end; }
.sx-pagehead__h1 { font-size: clamp(48px, 6.6vw, 112px) !important; margin: 0; text-align: left !important; }
.sx-pagehead__lead { color: #b9b9b9; font: 400 clamp(16px, 1.3vw, 20px)/1.55 var(--sx-sans); margin: 0; }
@media (max-width: 860px) { .sx-pagehead__grid { grid-template-columns: 1fr; } }
.sx-briefsec .sx-pagehead__grid { align-items: start; }
.sx-briefwrap { background: #0d0d0d; border: 1px solid #ffffff14; border-radius: 24px; padding: clamp(20px, 3vw, 40px); }
/* misc */
.sx-flag { display: inline-block; margin: 8px 0 0; padding: 4px 10px; border: 1px dashed #ff5a5a; border-radius: 6px; color: #ff8a8a; font: 500 12px/1.4 monospace; }
span.sx-ph.sx-ph--inline { display: inline-block; width: auto; height: auto; min-height: 0; padding: 2px 8px; vertical-align: middle; }
.v2-head--left { text-align: left !important; align-items: flex-start !important; } .v2-head--left .sx-body { margin: 20px 0 0; }
.sx-race__body { position: absolute; left: 50%; bottom: 12vh; transform: translateX(-50%); width: min(640px, 88vw); text-align: center; color: #b5b5b5; margin: 0; }
.sx-footer { padding: 64px 0 40px; border-top: 1px solid #ffffff14; }
.sx-foot__links { display: flex; flex-wrap: wrap; gap: 12px 24px; } .sx-foot__mail a { color: inherit; }
/* ---- v1.5 quick edits (Matt 2026-11-09) ---- */
/* eyebrow: no box, lime starburst beside the text */
.sx-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; font: 500 12px/1 var(--sx-sans); letter-spacing: .12em; text-transform: uppercase; color: #e6e6e6; }
.sx-eyebrow__star { font-style: normal; font-size: 16px; line-height: 1; color: var(--pop-l); }
.sx-ticks--one { margin-top: 28px; font-size: clamp(14px, 1.25vw, 17px); color: #cfcfcf; letter-spacing: .01em; }
/* flipped split: body left, headline right */
.sx-split--flip .sx-split__h { order: 2; }
@media (max-width: 860px) { .sx-split--flip .sx-split__grid { grid-template-columns: 1fr; } .sx-split--flip .sx-split__h { order: 0; } }
/* services bento (home) */
.sx-board--svc .sx-board__cell { justify-content: flex-start; gap: clamp(28px, 4vw, 64px); min-height: 240px; }
.sx-board__svc { margin-top: auto; }
.sx-board__svc strong { display: block; font: 700 clamp(26px, 2.8vw, 46px)/.98 var(--sx-sans); letter-spacing: -.04em; margin: 0 0 14px; position: static; }
.sx-board--svc .sx-board__cell--pop .sx-board__svc strong { font-size: clamp(44px, 5.6vw, 92px); letter-spacing: -.05em; margin-bottom: 20px; }
.sx-board__svc p { margin: 0; max-width: 34ch; color: #9a9a9a; font: 400 clamp(14px, 1.05vw, 16px)/1.5 var(--sx-sans); }
.sx-board--svc .sx-board__cell--pop .sx-board__svc p { color: #000000b8; max-width: 38ch; font-size: clamp(15px, 1.2vw, 18px); }
.sx-board--svc .sx-board__cell:nth-child(5) strong { color: var(--pop-m); }
@media (max-width: 560px) { .sx-board--svc .sx-board__cell { min-height: 0; } .sx-board--svc .sx-board__cell--pop .sx-board__svc strong { font-size: clamp(36px, 11vw, 56px); } }
/* creative showcase */
.sx-show { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.4vw, 20px); margin-top: clamp(32px, 4vw, 56px); }
.sx-show__tile { position: relative; margin: 0; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #111; border: 1px solid #ffffff14; }.sx-show__tile img, .sx-show__tile .sx-clip__ph, .sx-show__tile video.sx-clip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-show__tile .sx-clip__ph { background: linear-gradient(160deg, #1a1a1a, #0b0b0b); }
.sx-show__tile figcaption { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; align-items: center; font: 600 11px/1 var(--sx-sans); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.sx-show__tile figcaption i { width: 7px; height: 7px; border-radius: 50%; background: var(--pop-m); }
@media (max-width: 960px) { .sx-show { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .sx-show { grid-template-columns: repeat(2, 1fr); } }
/* stacked page head (agencies) */
.sx-pagehead--stack .sx-pagehead__grid { grid-template-columns: 1fr; align-items: start; gap: 28px; }
.sx-pagehead--stack .sx-pagehead__h1 { max-width: 13ch; }
.sx-pagehead--stack .sx-pagehead__lead { max-width: 620px; }
/* process diagram: mock per step + loop */
/* mocks */
/* services grid (home): ours + the category's service types */
.sx-svc { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(40px, 5vw, 72px); border: 1px solid #ffffff1f; border-radius: 28px; overflow: hidden; background: #070707; }
.sx-svc__cell { position: relative; padding: clamp(18px, 2vw, 30px); min-height: 250px; display: flex; flex-direction: column; border-right: 1px solid #ffffff14; border-bottom: 1px solid #ffffff14; overflow: hidden; }
.sx-svc__cell--pop { grid-column: span 2; grid-row: span 2; background: var(--pop-l); color: #000; border: 0; }
.sx-svc__cell--pop .sx-board__lbl { color: #000; } .sx-svc__cell--pop .sx-board__lbl i::before { color: #000; }
.sx-svc .sx-board__svc strong { font-size: clamp(20px, 1.9vw, 30px); margin-bottom: 10px; }
.sx-svc .sx-board__svc p { max-width: none; font-size: clamp(13px, .95vw, 15px); }
.sx-svc__cell--pop .sx-board__svc strong { font-size: clamp(44px, 5.6vw, 92px); }
.sx-svc__cell--pop .sx-board__svc p { color: #000000b8; font-size: clamp(15px, 1.2vw, 18px); max-width: 38ch; }
.sx-svc__cell:nth-child(8), .sx-svc__cell:nth-child(9) { }
.sx-svc__cell:nth-child(4n+3):not(.sx-svc__cell--pop) { }
.sx-builtfor { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; color: #8d8d8d; font: 500 13px/1.4 var(--sx-sans); }
.sx-builtfor > span { letter-spacing: .12em; text-transform: uppercase; font-size: 11px; color: #cfcfcf; } .sx-builtfor ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.sx-builtfor li { padding: 7px 13px; border: 1px solid #ffffff22; border-radius: 999px; color: #e6e6e6; } .sx-builtfor p { margin: 0 0 0 auto; }
@media (max-width: 960px) { .sx-svc { grid-template-columns: 1fr 1fr; } .sx-svc__cell--pop { grid-column: 1 / -1; grid-row: auto; } .sx-builtfor p { margin-left: 0; } }
@media (max-width: 560px) { .sx-svc { grid-template-columns: 1fr; } .sx-svc__cell { min-height: 0; } }
/* glass proof strip + starburst glow */
.sx-proofbar { position: relative; }
.sx-proofbar::before { content: "✦"; position: absolute; left: 50%; top: -40px; transform: translateX(-50%); font-size: 220px; line-height: 1; color: var(--pop-l); opacity: .07; filter: blur(2px); pointer-events: none; }
.sx-proofbar__inner { position: relative; background: #ffffff0d; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: #ffffff22; }
.sx-proofbar p + p { border-left: 1px dotted #ffffff40; padding-left: 56px; }
@media (max-width: 860px) { .sx-proofbar p + p { border-left: 0; padding-left: 0; } }
/* comparison table */
/* managed pages diagram */
/* anatomy of a viral moment */
/* case study template */
.sx-case { margin-top: 8px; }
.sx-case__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.sx-case__stat { padding: 20px 22px; border-radius: 16px; background: var(--pop-l); color: #000; display: flex; flex-direction: column; gap: 10px; } .sx-case__stat strong { font: 700 28px/1 var(--sx-sans); } .sx-case__stat span { font: 600 11px/1 var(--sx-sans); letter-spacing: .1em; text-transform: uppercase; }
.sx-case__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(20px, 3vw, 48px); align-items: start; }
.sx-case__sec { padding: 18px 0; border-top: 1px solid #ffffff1f; } .sx-case__sec h3, .sx-case__spec h3 { margin: 0 0 8px; color: #fff; font: 600 18px/1.2 var(--sx-sans); } .sx-case__sec p { margin: 0; color: #9a9a9a; }
.sx-case__spec { padding: 22px; border: 1px solid #ffffff1f; border-radius: 20px; background: #0d0d0d; }
.sx-case__row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #ffffff14; color: #9a9a9a; font: 500 14px/1.3 var(--sx-sans); }
.sx-case__bar { margin-top: 18px; display: grid; grid-template-columns: 1fr; gap: 8px; font: 600 11px/1 var(--sx-sans); letter-spacing: .1em; text-transform: uppercase; color: #9a9a9a; }
@media (max-width: 860px) { .sx-case__grid { grid-template-columns: 1fr; } .sx-case__stats { grid-template-columns: 1fr; } }
/* showcase marquee (two rows, opposite directions) */
.sx-show { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 20px); margin-top: clamp(32px, 4vw, 56px); overflow: hidden; grid-template-columns: none; }
.sx-show__row { overflow: hidden; } .sx-show__track { display: flex; gap: clamp(10px, 1.4vw, 20px); width: max-content; animation: sx-slide 48s linear infinite; }
.sx-show__row--rev .sx-show__track { animation-direction: reverse; animation-duration: 56s; }
.sx-show__tile { flex: 0 0 clamp(120px, 14vw, 190px); aspect-ratio: 9 / 16; }
@keyframes sx-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sx-show__track { animation: none; } }
/* client dashboard rows */
/* dots -> starburst (Matt 2026-11-09): labels + captions */
.sx-board__lbl i, .sx-clip figcaption i, .sx-show__tile figcaption i { width: auto; height: auto; border-radius: 0; background: none !important; animation: none; box-shadow: none; font-style: normal; line-height: 1; }
.sx-board__lbl i::before, .sx-clip figcaption i::before, .sx-show__tile figcaption i::before { content: "✦"; font-size: 1.35em; color: var(--pop-l); }
.sx-board__cell--pop .sx-board__lbl i::before { color: #000; }
.sx-clip figcaption i::before, .sx-show__tile figcaption i::before { color: var(--pop-m); }
.sx-casesec .sx-case { margin-top: clamp(32px, 4vw, 56px); }
/* ---- v1.5 round 3 (Matt 2026-11-09) ---- */
/* every split on one shared column line, whichever side the headline is on */
.sx-split__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.sx-split__body { padding-top: 0; }
.sx-split__body > .sx-body:first-child { margin-top: -.1em; }
.sx-split--wideh .sx-split__grid { grid-template-columns: minmax(0, 1fr) auto; }
@media (min-width: 861px) { .sx-nb { white-space: nowrap; } }
@media (max-width: 860px) { .sx-split__grid, .sx-split--wideh .sx-split__grid { grid-template-columns: minmax(0, 1fr); } }
/* hero wordmark: whole letters, nothing clipped */
.sx-hero2 { padding-bottom: clamp(72px, 9vw, 150px); }
.sx-hero2__ghost { bottom: 1.2vw; }
/* proof strip: header with its line underneath */
.sx-proofbar__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: 20px clamp(20px, 3vw, 44px); }
.sx-proofbar p { flex-direction: column; align-items: flex-start; gap: 8px; }
.sx-proofbar p + p { padding-left: clamp(20px, 3vw, 44px); }
.sx-proofbar .sx-link { margin-left: 0; white-space: nowrap; }
@media (max-width: 860px) { .sx-proofbar__inner { grid-template-columns: minmax(0, 1fr); } .sx-proofbar p + p { padding-left: 0; } .sx-proofbar .sx-link { justify-self: start; } }
/* engine: scale board */
.sx-board--3 { grid-template-columns: 1.2fr 1fr; }
.sx-board--3 .sx-board__cell { border-right: 0 !important; grid-column: auto !important; }
.sx-board--3 .sx-board__cell--pop { border-right: 1px solid #ffffff14 !important; }
.sx-board--3 .sx-board__cell:nth-child(3) { border-bottom: 0; }
.sx-board--3 .sx-board__cell strong { display: block; color: inherit; margin: 0 0 12px; font: 700 clamp(44px, 5.4vw, 84px)/.95 var(--sx-sans); letter-spacing: -.05em; }
.sx-board--3 .sx-board__cell--pop strong { font-size: clamp(64px, 9.6vw, 150px); }
.sx-board--3 .sx-board__svc p { max-width: 40ch; }
.sx-board--3 .sx-board__cell--pop .sx-board__svc p { color: #000000b8; font-size: clamp(15px, 1.25vw, 19px); }
.sx-board--3 .sx-board__cell:nth-child(3) strong { color: var(--pop-m); }
@media (max-width: 860px) { .sx-board--3 { grid-template-columns: minmax(0, 1fr); } .sx-board--3 .sx-board__cell--pop { grid-column: auto; border-right: 0 !important; } }
/* work hero: poster fan + result chips */
.sx-workhero { position: relative; overflow: hidden; padding: clamp(130px, 13vw, 190px) 0 clamp(56px, 7vw, 110px); }
.sx-workhero__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.sx-fan { position: relative; height: clamp(400px, 42vw, 600px); }
.sx-fan__card { position: absolute; top: 50%; left: calc(50% + (var(--i) - 2) * 17%); width: 27%; aspect-ratio: 9 / 16; margin: 0; border-radius: 18px; overflow: hidden; background: #111; border: 1px solid #ffffff24;
  transform: translate(-50%, calc(-50% + var(--y))) rotate(var(--r)); box-shadow: 0 24px 60px #000c; z-index: calc(3 - max(var(--i) - 2, 2 - var(--i))); }.sx-fan__card img, .sx-fan__card .sx-clip__ph, .sx-fan__card video.sx-clip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-fan__chip { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border-radius: 16px; max-width: 220px; animation: sx-float 5s ease-in-out infinite alternate; }
.sx-fan__chip strong { font: 700 clamp(34px, 4vw, 60px)/.9 var(--sx-sans); letter-spacing: -.05em; }
.sx-fan__chip span { font: 500 13px/1.3 var(--sx-sans); }
.sx-fan__chip--a { left: 0; bottom: 8%; background: var(--pop-l); color: #000; }
.sx-fan__chip--b { right: 0; top: 6%; background: var(--pop-m); color: #000; animation-delay: -2s; }
.sx-fan__chip--c { right: 3%; bottom: 3%; background: #fff; color: #000; animation-delay: -3.5s; }
@keyframes sx-float { to { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .sx-fan__chip { animation: none; } }
@media (max-width: 860px) { .sx-workhero__grid { grid-template-columns: minmax(0, 1fr); } .sx-fan { height: 112vw; max-height: 560px; } .sx-fan__card { width: 34%; left: calc(50% + (var(--i) - 2) * 20%); }
  .sx-fan__chip { padding: 12px 14px; max-width: 150px; } .sx-fan__chip strong { font-size: 30px; } .sx-fan__chip span { font-size: 11px; } }
/* agencies: client view, copy beside the dashboard */
.sx-clients__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.sx-clients .sx-split__body { margin-top: 24px; }
@media (max-width: 860px) { .sx-clients__grid { grid-template-columns: minmax(0, 1fr); } }
/* FAQ button: even padding (the v0.2 style left room for an icon we don't use) */
.sx-v1 .faq__cta { display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; font-weight: 600; }
/* creators */
.sx-crsteps .lps-step__title { font-size: clamp(26px, 2.75vw, 40px); }
.sx-crsteps .sx-node { gap: 0; }
.sx-reach { display: flex; align-items: center; margin-top: 28px; height: 170px; max-width: 620px; }
.sx-reach__cut { position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: 9 / 16; margin: 0; border-radius: 12px; overflow: hidden; border: 2px solid var(--pop-l); }.sx-reach__cut img, .sx-reach__cut video.sx-clip__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-reach__cut figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 0; text-align: center; background: var(--pop-l); color: #000; font: 700 10px/1 var(--sx-sans); letter-spacing: .08em; text-transform: uppercase; }
.sx-reach__fan { flex: 1 1 48px; min-width: 22px; height: 150px; overflow: visible; }
.sx-reach__fan path { fill: none; stroke: var(--pop-m); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.sx-reach__to { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; height: 150px; flex: 0 0 auto; }
.sx-reach__to li { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid #ffffff2e; border-radius: 999px; background: #0d0d0d; color: #e6e6e6; font: 500 13px/1 var(--sx-sans); white-space: nowrap; }
.sx-reach__to li i { width: 7px; height: 7px; border-radius: 50%; background: var(--pop-l); }
.sx-reach__paid { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 14px; background: var(--pop-l); color: #000; }
.sx-reach__paid strong { font: 700 28px/.9 var(--sx-sans); letter-spacing: -.04em; } .sx-reach__paid span { font: 500 11px/1.2 var(--sx-sans); max-width: 70px; }
@media (max-width: 560px) { .sx-reach { height: 130px; } .sx-reach__fan { height: 120px; } .sx-reach__to { height: 120px; } .sx-reach__to li { height: 32px; padding: 0 9px; font-size: 11px; gap: 5px; } .sx-reach__paid { padding: 10px; } .sx-reach__paid strong { font-size: 20px; } .sx-reach__paid span { font-size: 9px; max-width: 50px; } }
.sx-workhero .sx-pagehead__lead { margin-top: 24px; }
.sx-proofbar::before { content: none; }
.sx-split__grid + .sx-ph--card { margin-top: clamp(32px, 4vw, 56px); }
@media (max-width: 860px) { .sx-close__grid { grid-template-columns: minmax(0, 1fr); } .sx-close__h { font-size: clamp(38px, 11.5vw, 72px); } }
/* ---- v1.5 round 4: edit-bay graphic kit (Matt 2026-11-09) ---- */
.sx-mocknote { margin: 34px 0 0; color: #5f5f5f; font: 500 11px/1 ui-monospace, Menlo, monospace; text-align: right; }
/* service mini-visuals */
.sx-mv { position: relative; display: flex; height: 92px; margin: 20px 0 18px; color: var(--pop-l); align-items: flex-end; gap: 4px; }
.sx-mv svg { width: 100%; height: 100%; overflow: visible; }
.sx-mv__chip { position: absolute; left: 0; bottom: 0; padding: 5px 9px; border-radius: 999px; background: #000; border: 1px solid #ffffff2e; color: #fff; font: 600 10px/1 var(--sx-sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; z-index: 3; }
.sx-mv__chip--tr { left: auto; right: 0; bottom: auto; top: -2px; color: var(--pop-l); } .sx-mv__chip--tl { bottom: auto; top: 0; color: var(--pop-l); } .sx-mv__chip--br { left: auto; right: 0; }
.sx-mv__bars { position: absolute; inset: 0 0 0 0; display: flex; align-items: center; gap: 2px; } .sx-mv__bars i { flex: 1; height: var(--h); border-radius: 2px; background: #ffffff24; } .sx-mv__bars i.m { background: var(--pop-m); }
.sx-mv__bars--wide { align-items: flex-end; gap: 6px; } .sx-mv__bars--wide i.w { background: var(--pop-l); }
.sx-mv__sel { position: absolute; top: -4px; bottom: -4px; left: 41.2%; width: 17.4%; border: 1.5px solid var(--pop-l); border-radius: 6px; } .sx-mv__sel::before, .sx-mv__sel::after { content: ""; position: absolute; top: 50%; width: 4px; height: 18px; margin-top: -9px; border-radius: 2px; background: var(--pop-l); } .sx-mv__sel::before { left: -3px; } .sx-mv__sel::after { right: -3px; }
.sx-mv--scan .sx-mv__chip { background: var(--pop-l); color: #000; border: 0; }
.sx-mv--burst svg path { stroke: currentColor; stroke-width: .7; opacity: .55; fill: none; } .sx-mv--burst svg circle { fill: currentColor; } .sx-mv--burst svg circle.o { fill: none; stroke: currentColor; stroke-width: 1; } .sx-mv--burst svg path.s { fill: currentColor; stroke: 0; opacity: 1; }
.sx-svc__cell--pop .sx-mv--burst, .sx-board--3 .sx-board__cell--pop .sx-mv--burst { position: absolute; top: -10%; right: -7%; width: min(68%, 440px); height: auto; aspect-ratio: 1; margin: 0; color: #000; z-index: 0; animation: sx-spin 120s linear infinite; }
.sx-board--3 .sx-board__cell--pop .sx-mv--burst { width: min(60%, 400px); }
.sx-svc__cell--pop .sx-board__svc, .sx-board--3 .sx-board__svc, .sx-svc__cell--pop .sx-board__lbl, .sx-board--3 .sx-board__lbl { position: relative; z-index: 1; }
.sx-board--3 .sx-board__cell { min-height: 280px; } .sx-board--3 .sx-board__svc { margin-top: auto; }
@keyframes sx-spin { to { transform: rotate(360deg); } }
.sx-mv--cuts { gap: 0; align-items: center; padding-left: 8px; }.sx-mv--cuts img, .sx-mv--cuts .ph, .sx-mv--cuts video.sx-clip__img { display: block; width: 50px; height: 88px; border-radius: 7px; object-fit: cover; margin-left: -10px; border: 1.5px solid #070707; background: linear-gradient(160deg, #2c2c2c, #151515); box-shadow: 0 6px 14px #0009; }
.sx-mv--cuts > :nth-child(1) { transform: rotate(-9deg) translateY(4px); } .sx-mv--cuts > :nth-child(2) { transform: rotate(-4deg); } .sx-mv--cuts > :nth-child(3) { transform: scale(1.04); z-index: 2; border-color: var(--pop-m); } .sx-mv--cuts > :nth-child(4) { transform: rotate(4deg); } .sx-mv--cuts > :nth-child(5) { transform: rotate(9deg) translateY(4px); }
.sx-mv--cuts .sx-mv__chip { left: auto; right: 0; bottom: 4px; color: var(--pop-l); }
.sx-mv--ugc2 { align-items: center; gap: 12px; } .sx-mv--ugc2 .ph { position: relative; width: 52px; height: 92px; border-radius: 8px; overflow: hidden; border: 1.5px solid #ffffff3a; flex: none; }.sx-mv--ugc2 .ph img, .sx-mv--ugc2 .ph video.sx-clip__img { width: 100%; height: 100%; object-fit: cover; }
.sx-mv--ugc2 .ic { display: flex; flex-direction: column; gap: 8px; flex: none; } .sx-mv--ugc2 .ic svg { width: 18px; height: 18px; fill: var(--pop-m); } .sx-mv--ugc2 .ic svg + svg { fill: #ffffff55; }
.sx-mv--ugc2 .av { display: flex; } .sx-mv--ugc2 .av i { width: 30px; height: 30px; border-radius: 50%; margin-left: -9px; border: 2px solid #070707; background: conic-gradient(from 40deg, var(--pop-l), #2a2a2a 45%, var(--pop-m)); } .sx-mv--ugc2 .av i:nth-child(2n) { background: conic-gradient(from 200deg, #fff, #333 55%, var(--pop-l)); } .sx-mv--ugc2 .av i:first-child { margin-left: 0; }
.sx-mv--pipe { align-items: center; justify-content: space-between; gap: 0; } .sx-mv--pipe::before { content: ""; position: absolute; left: 12px; right: 18px; top: 34px; height: 1px; background: repeating-linear-gradient(90deg, #ffffff40 0 4px, transparent 4px 8px); }
.sx-mv--pipe span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #8d8d8d; font: 600 10.5px/1 var(--sx-sans); letter-spacing: .02em; } .sx-mv--pipe i { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #ffffff44; background: #070707; } .sx-mv--pipe .on { color: var(--pop-l); } .sx-mv--pipe .on i { background: var(--pop-l); border-color: var(--pop-l); box-shadow: 0 0 0 5px #84ff0022; }
.sx-mv--hub .ln { fill: none; stroke: #ffffff55; stroke-dasharray: 3 3; } .sx-mv--hub .c { fill: var(--pop-l); } .sx-mv--hub .st { fill: #000; } .sx-mv--hub .p { fill: #111; stroke: #ffffff33; } .sx-mv--hub text { fill: #e6e6e6; font: 600 10.5px var(--sx-sans); }
.sx-mv--scatter svg circle { fill: #ffffff33; } .sx-mv--scatter .h { fill: var(--pop-l); } .sx-mv--scatter .ax { fill: none; stroke: #ffffff26; } .sx-mv--scatter .z { fill: #84ff0012; stroke: var(--pop-l); stroke-dasharray: 3 3; } .sx-mv--scatter text { fill: #6f6f6f; font: 600 8.5px var(--sx-sans); }
.sx-mv--chart svg .l { fill: none; stroke: var(--pop-l); stroke-width: 2.4; vector-effect: non-scaling-stroke; } .sx-mv--chart svg .m { fill: none; stroke: var(--pop-m); stroke-width: 1.6; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.sx-mv__tog, .sx-pm__tog, .sx-dash__tog { display: inline-flex; padding: 2px; border-radius: 999px; background: #000; border: 1px solid #ffffff24; font: 600 9px/1 var(--sx-sans); color: #8d8d8d; } .sx-mv__tog { position: absolute; left: 0; top: -2px; } .sx-mv__tog u, .sx-pm__tog u, .sx-dash__tog u { text-decoration: none; padding: 4px 7px; border-radius: 999px; } .sx-mv__tog .on, .sx-pm__tog .on, .sx-dash__tog .on { background: var(--pop-l); color: #000; }
@media (max-width: 960px) { .sx-svc__cell--pop { min-height: 460px; } }
@media (prefers-reduced-motion: reduce) { .sx-mv--burst { animation: none !important; } }
/* process: rail + numbered nodes + a mock per step + loop */
.sx-proc { position: relative; list-style: none; margin: clamp(52px, 6vw, 84px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.sx-proc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--pop-l), var(--pop-m)); z-index: 2; }
.sx-proc__step { position: relative; display: flex; flex-direction: column; padding: 30px 12px 18px; border: 1px solid #ffffff1a; border-radius: 16px; background: #0b0b0b; }
.sx-proc__n { position: absolute; top: -18px; left: 12px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--pop-l); color: #000; font: 700 12px/1 var(--sx-sans); letter-spacing: .02em; }
.sx-proc__step--loop .sx-proc__n { background: var(--pop-m); font-size: 16px; }
.sx-proc__tag { align-self: flex-start; margin-bottom: 12px; padding: 4px 8px; border: 1px solid #ffffff26; border-radius: 999px; color: #b9b9b9; font: 600 9.5px/1 var(--sx-sans); letter-spacing: .1em; text-transform: uppercase; }
.sx-proc__mock { height: 136px; margin-bottom: 16px; border-radius: 10px; background: #131313; border: 1px solid #ffffff12; overflow: hidden; display: flex; }
.sx-proc__step h3 { margin: 0 0 8px; color: #fff; font: 600 clamp(15px, 1.2vw, 18px)/1.2 var(--sx-sans); letter-spacing: -.02em; }
.sx-proc__step p { margin: 0; color: #9a9a9a; font: 400 clamp(12.5px, .95vw, 14px)/1.5 var(--sx-sans); }
.sx-proc__loop { position: relative; height: 40px; margin: 14px calc(100% / 12) 0 calc(100% / 12 * 3); border: 1.5px dashed var(--pop-m); border-top: 0; border-radius: 0 0 16px 16px; }
.sx-proc__loop::before { content: "▲"; position: absolute; left: -7px; top: -9px; color: var(--pop-m); font-size: 11px; }
.sx-proc__loop span { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 0 12px; background: #000; color: var(--pop-m); font: 600 11px/1 var(--sx-sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 1100px) { .sx-proc { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; } .sx-proc::before { display: none; } .sx-proc__loop { margin: 18px 0 0; } }
@media (max-width: 640px) { .sx-proc { grid-template-columns: minmax(0, 1fr); } .sx-proc__mock { height: 150px; } .sx-proc__loop span { font-size: 10px; } }
.sx-pm { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; padding: 10px; gap: 7px; font: 600 9.5px/1 var(--sx-sans); letter-spacing: .05em; color: #8d8d8d; }
.sx-pm__h { color: #fff; } .sx-pm .g { display: grid; flex: 1; min-height: 0; }
.sx-pm--cal .g { grid-template-columns: repeat(7, 1fr); gap: 3px; } .sx-pm--cal i { border-radius: 3px; background: #ffffff1c; } .sx-pm--cal i.off { background: #ffffff0a; } .sx-pm--cal i.on { background: var(--pop-l); box-shadow: 0 0 0 2px #84ff0044; }
.sx-pm--lib .g { grid-template-columns: repeat(3, 1fr); gap: 4px; } .sx-pm--lib i { position: relative; border-radius: 4px; background: linear-gradient(150deg, #2d2d2d, #181818); } .sx-pm--lib i.m { outline: 1.5px solid var(--pop-m); } .sx-pm--lib i.m::after { content: "✦"; position: absolute; right: 3px; top: 3px; color: var(--pop-m); font-size: 9px; font-style: normal; } .sx-pm--lib em { font-style: normal; color: var(--pop-m); }
.sx-pm--var .g { grid-template-columns: repeat(6, 1fr); gap: 3px; } .sx-pm--var .g i { border-radius: 3px; background: linear-gradient(160deg, #303030, #171717); border: 1px solid #ffffff14; } .sx-pm--var .v1, .sx-pm--var .v4 { border-color: var(--pop-m) !important; } .sx-pm--var .v2 { border-color: var(--pop-l) !important; }
.sx-pm .av { display: flex; flex: none; } .sx-pm .av i { width: 18px; height: 18px; border-radius: 50%; margin-left: -5px; border: 1.5px solid #131313; background: conic-gradient(from 40deg, var(--pop-l), #2a2a2a 45%, var(--pop-m)); } .sx-pm .av i:nth-child(2n) { background: conic-gradient(from 200deg, #fff, #333 55%, var(--pop-l)); } .sx-pm .av i:first-child { margin-left: 0; }
.sx-pm--tick { padding: 0 10px; overflow: hidden; -webkit-mask: linear-gradient(#0000, #000 18%, #000 82%, #0000); mask: linear-gradient(#0000, #000 18%, #000 82%, #0000); } .sx-pm--tick .t { display: flex; flex-direction: column; gap: 9px; animation: sx-tick 9s linear infinite; }
.sx-pm--tick .t > span { display: flex; align-items: center; gap: 6px; } .sx-pm--tick em { font-style: normal; flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: #ffffff14; color: #fff; font-size: 8px; } .sx-pm--tick b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #cfcfcf; font-weight: 500; letter-spacing: 0; } .sx-pm--tick u { text-decoration: none; padding: 3px 6px; border-radius: 999px; background: var(--pop-l); color: #000; font-size: 8px; }
@keyframes sx-tick { to { transform: translateY(calc(-50% - 4.5px)); } } @media (prefers-reduced-motion: reduce) { .sx-pm--tick .t { animation: none; } }
.sx-pm--rep .sx-pm__tog { align-self: flex-start; } .sx-pm--rep .k { display: flex; justify-content: space-between; } .sx-pm--rep .k em { font-style: normal; } .sx-pm--rep svg { flex: 1; min-height: 0; width: 100%; } .sx-pm--rep .l { fill: none; stroke: var(--pop-l); stroke-width: 2.2; vector-effect: non-scaling-stroke; } .sx-pm--rep .m { fill: none; stroke: var(--pop-m); stroke-width: 1.4; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.sx-pm--loop { align-items: center; justify-content: center; } .sx-pm--loop svg { width: 100px; height: 100px; } .sx-pm--loop .b { fill: none; stroke: #ffffff1c; stroke-width: 5; } .sx-pm--loop .a { fill: none; stroke: var(--pop-m); stroke-width: 5; stroke-linecap: round; } .sx-pm--loop .h { fill: none; stroke: var(--pop-m); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .sx-pm--loop u { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-decoration: none; color: #fff; }
/* agencies: dashboard mock, bleeding off the right */
.sx-clients { overflow: hidden; }
.sx-clients__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.sx-dash { box-sizing: border-box; width: 122%; padding: clamp(18px, 2vw, 26px); border-radius: 22px; background: #0d0d0d; border: 1px solid #ffffff1f; box-shadow: 0 30px 80px #000; -webkit-mask: linear-gradient(90deg, #000 80%, #0000); mask: linear-gradient(90deg, #000 80%, #0000); }
.sx-dash__top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; color: #fff; font: 600 14px/1 var(--sx-sans); } .sx-dash__t u { text-decoration: none; margin-left: 8px; padding: 3px 8px; border-radius: 999px; background: var(--pop-l); color: #000; font-size: 10px; } .sx-dash__s { margin-right: 24%; margin-left: auto; color: #6f6f6f; font: 600 10px/1 var(--sx-sans); letter-spacing: .1em; text-transform: uppercase; } .sx-dash__tog { margin-left: 8px; }
.sx-dash__k { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: clamp(20px, 3vw, 44px); margin-bottom: 8px; } .sx-dash__k em { display: block; font-style: normal; color: #8d8d8d; font: 500 11px/1 var(--sx-sans); margin-bottom: 8px; } .sx-dash__k strong { color: #fff; font: 700 clamp(24px, 2.4vw, 36px)/1 var(--sx-sans); letter-spacing: -.04em; }
.sx-dash__c { display: block; width: 100%; height: 110px; margin: 6px 0 12px; } .sx-dash__c .l { fill: none; stroke: var(--pop-l); stroke-width: 2.4; vector-effect: non-scaling-stroke; } .sx-dash__c .m { fill: none; stroke: var(--pop-m); stroke-width: 1.6; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.sx-dash__row { display: grid; grid-template-columns: 26px 78px 62px 52px 1fr; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #ffffff10; color: #e6e6e6; font: 500 13px/1 var(--sx-sans); } .sx-dash__row i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #ffffff14; font-style: normal; font-size: 11px; font-weight: 700; } .sx-dash__row u { justify-self: start; text-decoration: none; padding: 3px 7px; border: 1px solid #ffffff26; border-radius: 999px; color: #b9b9b9; font-size: 10px; } .sx-dash__row strong { font-weight: 700; color: #fff; } .sx-dash__row b { display: block; height: 7px; width: var(--w); border-radius: 4px; background: var(--pop-l); }
.sx-dash__f { margin: 12px 0 0; color: #8d8d8d; font: 500 12px/1 var(--sx-sans); } .sx-dash__f i { margin-right: 7px; color: var(--pop-l); font-style: normal; }
@media (max-width: 860px) { .sx-clients__grid { grid-template-columns: minmax(0, 1fr); } .sx-dash { width: 100%; -webkit-mask: none; mask: none; } .sx-dash__s { margin-right: 0; } .sx-dash__top { flex-wrap: wrap; } .sx-dash__row { grid-template-columns: 26px minmax(0, 1fr) 54px 44px; } .sx-dash__row b { grid-column: 1 / -1; } }
/* compare: SUBTXT column as the highlight */
.sx-cmp { margin-top: clamp(32px, 4vw, 56px); border: 1px solid #ffffff1f; border-radius: 22px; overflow: hidden; }
.sx-cmp__row { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1.3fr); color: #7c7c7c; font: 400 clamp(15px, 1.25vw, 18px)/1.35 var(--sx-sans); }
.sx-cmp__row > span { display: flex; gap: 12px; align-items: center; padding: 22px 24px; border-top: 1px solid #ffffff12; } .sx-cmp__row > span:first-child { color: #fff; font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; } .sx-cmp__row > span:last-child { background: var(--pop-l); color: #000; font-weight: 600; border-top-color: #00000022; } .sx-cmp__row i { font-style: normal; flex: none; }
.sx-cmp__row--h > span { padding: 16px 24px; border-top: 0; font: 600 11px/1 var(--sx-sans) !important; letter-spacing: .12em !important; text-transform: uppercase; color: #8d8d8d; } .sx-cmp__row--h > span:last-child { color: #000; }
@media (max-width: 640px) { .sx-cmp__row { grid-template-columns: minmax(0, 1fr); } .sx-cmp__row > span { padding: 12px 16px; } .sx-cmp__row--h { display: none; } }
/* marquee pages: account → themed pages */
.sx-pd { display: flex; flex-direction: column; align-items: center; margin-top: clamp(40px, 5vw, 64px); }
.sx-pd__main { display: flex; align-items: center; gap: 12px; padding: 12px 24px 12px 12px; border-radius: 999px; background: var(--pop-l); color: #000; } .sx-pd__main > i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #000; color: var(--pop-l); font-style: normal; font-size: 20px; } .sx-pd__main b, .sx-pd__head b { display: block; font: 700 15px/1.1 var(--sx-sans); } .sx-pd__main em { font: 500 12px/1.3 var(--sx-sans); font-style: normal; }
.sx-pd__fan { display: block; width: 100%; height: 80px; } .sx-pd__fan path { fill: none; stroke: var(--pop-m); stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.sx-pd__pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); width: 100%; }
.sx-pd__page { padding: 16px; border: 1px solid #ffffff1f; border-radius: 20px; background: #0c0c0c; } .sx-pd__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: #fff; } .sx-pd__head > i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--pop-m); color: var(--pop-m); font-style: normal; } .sx-pd__head b { font-size: 14px; } .sx-pd__head em { display: block; margin-top: 4px; font: 500 12px/1 var(--sx-sans); font-style: normal; color: #8d8d8d; }
.sx-pd__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .sx-pd__grid > * { width: 100%; aspect-ratio: 9 / 13; border-radius: 6px; object-fit: cover; display: block; background: linear-gradient(160deg, #2a2a2a, #151515); }
.sx-pd__status { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #9a9a9a; font: 500 12px/1 var(--sx-sans); } .sx-pd__status u { width: 8px; height: 8px; border-radius: 50%; background: var(--pop-l); }
@media (max-width: 640px) { .sx-pd__pages { grid-template-columns: minmax(0, 1fr); } .sx-pd__fan { height: 40px; } }
/* anatomy: an annotated clip */
.sx-anat { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 300px) minmax(0, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 72px); }
.sx-anat__phone { position: relative; grid-column: 2; grid-row: 1 / span 4; aspect-ratio: 9 / 16; margin: 0; border-radius: 26px; overflow: hidden; border: 1.5px solid #ffffff33; box-shadow: 0 30px 80px #000; }.sx-anat__phone > img, .sx-anat__phone > video.sx-clip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-anat__segs { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; gap: 4px; z-index: 2; } .sx-anat__segs i { flex: 1; height: 4px; border-radius: 3px; background: #ffffff55; } .sx-anat__segs i:nth-child(-n+2) { background: var(--pop-l); }
.sx-anat__zones { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(4, 1fr); } .sx-anat__zones i { border-top: 1px dashed #ffffff66; } .sx-anat__zones i:first-child { border-top: 0; background: linear-gradient(#0000008c, #0000); } .sx-anat__zones i:last-child { background: linear-gradient(#0000, #0000008c); }
.sx-anat__c { position: relative; display: flex; align-items: center; min-width: 0; } .sx-anat__c--l { grid-column: 1; } .sx-anat__c--r { grid-column: 3; flex-direction: row-reverse; }
.sx-anat__t { flex: 0 1 300px; } .sx-anat__c--l .sx-anat__t { text-align: right; } .sx-anat__t u { display: inline-block; margin-bottom: 8px; padding: 4px 9px; border: 1px solid var(--pop-m); border-radius: 999px; color: var(--pop-m); text-decoration: none; font: 600 10px/1 var(--sx-sans); letter-spacing: .12em; text-transform: uppercase; } .sx-anat__t h3 { margin: 0 0 6px; color: #fff; font: 700 clamp(20px, 1.9vw, 28px)/1.02 var(--sx-sans); letter-spacing: -.04em; text-transform: uppercase; } .sx-anat__t p { margin: 0; color: #9a9a9a; font: 400 15px/1.45 var(--sx-sans); }
.sx-anat__ln { flex: 1; min-width: 20px; height: 1px; margin: 0 12px; background: repeating-linear-gradient(90deg, var(--pop-l) 0 4px, transparent 4px 8px); }
.sx-anat__n { position: relative; z-index: 3; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pop-l); color: #000; font: 700 14px/1 var(--sx-sans); } .sx-anat__c--l .sx-anat__n { margin-right: -17px; } .sx-anat__c--r .sx-anat__n { margin-left: -17px; }
@media (max-width: 860px) { .sx-anat { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 20px; } .sx-anat__phone { grid-column: 1; grid-row: auto; width: min(62vw, 240px); justify-self: center; } .sx-anat__c { grid-column: 1 !important; grid-row: auto !important; flex-direction: row-reverse; justify-content: flex-end; gap: 14px; } .sx-anat__ln { display: none; } .sx-anat__n { margin: 0 !important; } .sx-anat__c--l .sx-anat__t { text-align: left; } }
/* viral moments hero: an edit timeline throwing clips up into the feed */
.sx-vm { position: relative; overflow: hidden; padding-top: clamp(104px, 8.6vw, 128px); }
.sx-vm__top { position: relative; min-height: clamp(380px, 28.5vw, 450px); }
.sx-vm__copy { position: relative; z-index: 3; max-width: 56%; }
.sx-vm__h1 { font-size: clamp(44px, 5.8vw, 98px); }
.sx-vm__copy .sx-pagehead__lead { margin-top: 28px; max-width: 520px; }
.sx-vm__poster { position: absolute; bottom: 0; width: clamp(120px, 12.4vw, 186px); aspect-ratio: 9 / 16; margin: 0; border-radius: 18px; overflow: hidden; background: #111; border: 1px solid #ffffff2e; box-shadow: 0 24px 60px #000c; transform: translateX(-50%) rotate(var(--r)); transform-origin: 50% 100%; }.sx-vm__poster img, .sx-vm__poster .sx-clip__ph, .sx-vm__poster video.sx-clip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-vm__poster figcaption { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; padding: 6px 9px; border-radius: 999px; background: #000b; color: #fff; font: 600 10px/1 var(--sx-sans); letter-spacing: .08em; text-transform: uppercase; } .sx-vm__poster figcaption i { color: var(--pop-m); font-style: normal; }
.sx-vm__stage { position: relative; padding-bottom: clamp(36px, 4vw, 60px); }
.sx-vm__fan { display: block; width: 100%; height: clamp(60px, 6vw, 90px); overflow: visible; } .sx-vm__fan path { fill: none; stroke: var(--pop-m); stroke-width: 1.5; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; animation: sx-flow 1.4s linear infinite; }
.sx-vm__fan path.mob { display: none; }
@keyframes sx-flow { to { stroke-dashoffset: 12; } }
.sx-vm__meta { display: flex; justify-content: space-between; padding: 0 var(--g) 10px; color: #8d8d8d; font: 500 11px/1 ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .08em; } .sx-vm__meta i { margin-right: 6px; color: var(--pop-l); font-style: normal; }
.sx-vm__track { position: relative; height: clamp(84px, 9vw, 132px); background: #0a0a0a; border-top: 1px solid #ffffff1c; border-bottom: 1px solid #ffffff1c; }
.sx-vm__bars { position: absolute; inset: 8px 0; display: flex; align-items: center; gap: 2px; } .sx-vm__bars i { flex: 1; height: var(--h); border-radius: 2px; background: #ffffff2a; } .sx-vm__bars i.m { background: var(--pop-m); }
.sx-vm__mark { position: absolute; top: -1px; bottom: -1px; border: 2px solid var(--pop-l); border-radius: 6px; } .sx-vm__mark b { position: absolute; left: -2px; top: -22px; padding: 4px 7px; border-radius: 5px 5px 0 0; background: var(--pop-l); color: #000; font: 700 10px/1 var(--sx-sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sx-vm__head { position: absolute; top: -8px; bottom: -8px; left: 0; width: 2px; background: #fff; animation: sx-play 18s linear infinite; } .sx-vm__head::before { content: "✦"; position: absolute; left: 50%; top: -10px; transform: translateX(-50%); color: #fff; font-size: 16px; line-height: 1; }
@keyframes sx-play { to { left: 100%; } }
.sx-vm__ruler { display: flex; justify-content: space-between; padding: 12px var(--g) 0; color: #6f6f6f; font: 500 11px/1 ui-monospace, Menlo, monospace; }
@media (prefers-reduced-motion: reduce) { .sx-vm__fan path, .sx-vm__head { animation: none; } }
@media (max-width: 860px) { .sx-vm__top { min-height: 0; } .sx-vm__copy { max-width: none; } .sx-vm__posters { position: relative; height: 62vw; max-height: 340px; margin-top: 36px; } .sx-vm__poster { width: 26vw; } .sx-vm__poster:nth-child(1) { left: 20% !important; } .sx-vm__poster:nth-child(2) { left: 50% !important; } .sx-vm__poster:nth-child(3) { left: 80% !important; } .sx-vm__fan path { display: none; } .sx-vm__fan path.mob { display: block; } .sx-vm__meta { display: none; } .sx-vm__bars i:nth-child(2n) { display: none; } .sx-vm__mark b { font-size: 8px; padding: 3px 5px; top: -17px; } }
/* showcase: one moment → every edit → tracked, then the wall */
.sx-src { display: flex; align-items: center; margin-top: clamp(32px, 4vw, 56px); opacity: 1 !important; font: inherit; }
.sx-src__col { flex: 0 0 auto; } .sx-src__col--e { flex: 0 1 auto; min-width: 0; } .sx-src__l { display: block; margin-bottom: 10px; color: #8d8d8d; font: 500 11px/1 ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .06em; }
.sx-src__frame { position: relative; width: clamp(200px, 22vw, 320px); aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 1.5px solid var(--pop-m); }.sx-src__frame img, .sx-src__frame video.sx-clip__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; }
.sx-src__bars { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 30px; display: flex; align-items: center; gap: 2px; padding: 3px 6px; border-radius: 6px; background: #000c; } .sx-src__bars i { flex: 1; height: var(--h); border-radius: 1px; background: #ffffff55; } .sx-src__bars i.m { background: var(--pop-m); }
.sx-src__fan { flex: 1 1 56px; min-width: 28px; height: 170px; overflow: visible; margin-top: 21px; } .sx-src__fan path { fill: none; stroke: var(--pop-l); stroke-width: 1.4; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.sx-src__edits { display: flex; gap: clamp(6px, .8vw, 12px); } .sx-src__edits figure { position: relative; margin: 0; width: clamp(62px, 7.6vw, 108px); aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; border: 1px solid #ffffff2a; background: #111; }.sx-src__edits img, .sx-src__edits .sx-clip__ph, .sx-src__edits video.sx-clip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sx-src__edits figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 6px 6px; background: linear-gradient(#0000, #000c); color: #fff; font: 600 9px/1.1 var(--sx-sans); letter-spacing: .04em; text-transform: uppercase; }
.sx-src__views { flex: 0 0 auto; margin-left: clamp(14px, 2vw, 28px); margin-top: 21px; padding: 16px; border-radius: 14px; background: var(--pop-l); color: #000; max-width: 120px; } .sx-src__views i { font-style: normal; font-size: 16px; } .sx-src__views strong { display: block; margin: 6px 0 4px; font: 700 22px/1 var(--sx-sans); letter-spacing: -.04em; } .sx-src__views span { font: 500 11px/1.25 var(--sx-sans); }
@media (max-width: 860px) { .sx-src { flex-direction: column; align-items: flex-start; gap: 18px; } .sx-src__fan { display: none; } .sx-src__views { margin: 0; max-width: none; } .sx-src__edits { flex-wrap: wrap; } .sx-src__edits figure { width: calc((100vw - 2 * var(--g) - 24px) / 3); } }
.sx-show { margin-top: clamp(28px, 3vw, 40px); }
.sx-show__tile figcaption { padding: 6px 9px; border-radius: 999px; background: #000b; left: 10px; bottom: 10px; font-size: 10px; }
.sx-post { position: absolute; right: 8px; bottom: 44px; display: flex; flex-direction: column; gap: 10px; z-index: 2; } .sx-post svg { width: 18px; height: 18px; fill: #fff; filter: drop-shadow(0 1px 3px #000a); } .sx-post svg:first-child { fill: var(--pop-m); }
/* case study: verified bar as pills, ticked section titles */
.sx-case__pills { display: grid; grid-template-columns: repeat(40, 1fr); gap: 2px; } .sx-case__pills i { height: 16px; border-radius: 3px; background: var(--pop-l); } .sx-case__pills i.r { background: var(--pop-m); }
.sx-case__sec h3 { position: relative; padding-left: 14px; } .sx-case__sec h3::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: var(--pop-l); }
.sx-board--3 .sx-mv__chip { display: none; }
.sx-pd__grid > i { position: relative; } .sx-pd__grid > i::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #ffffff66; }
/* community board: brief -> edits -> checked -> ready */
.sx-cb { display: grid; grid-template-columns: 236px 44px minmax(0, 1fr) 58px 264px; align-items: stretch; margin-top: clamp(40px, 5vw, 72px); height: clamp(380px, 31vw, 440px); }
.sx-cb__brief, .sx-cb__queue { display: flex; flex-direction: column; padding: 20px; border: 1px solid #ffffff1f; border-radius: 20px; background: #0c0c0c; }
.sx-cb__l { color: #8d8d8d; font: 500 10.5px/1 ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .06em; } .sx-cb strong { margin: 10px 0 14px; color: #fff; font: 700 28px/1 var(--sx-sans); letter-spacing: -.04em; text-transform: uppercase; }
.sx-cb__r { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid #ffffff12; color: #8d8d8d; font: 500 13px/1 var(--sx-sans); } .sx-cb__r b { color: #fff; font-weight: 600; }
.sx-cb__sent { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px 12px; border-radius: 12px; background: var(--pop-l); color: #000; font: 600 12px/1.15 var(--sx-sans); } .sx-cb__sent .av { display: flex; flex: none; } .sx-cb__sent .av i { width: 20px; height: 20px; border-radius: 50%; margin-left: -6px; border: 1.5px solid var(--pop-l); background: conic-gradient(from 40deg, #000, #4a4a4a 45%, var(--pop-m)); } .sx-cb__sent .av i:first-child { margin-left: 0; }
.sx-cb__arrow { position: relative; align-self: center; height: 1px; background: repeating-linear-gradient(90deg, var(--pop-m) 0 4px, transparent 4px 8px); } .sx-cb__arrow::after { content: "▶"; position: absolute; right: -2px; top: -7px; color: var(--pop-m); font-size: 10px; line-height: 14px; }
.sx-cb__wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; overflow: hidden; -webkit-mask: linear-gradient(#0000, #000 12%, #000 88%, #0000); mask: linear-gradient(#0000, #000 12%, #000 88%, #0000); }
.sx-cb__track { animation: sx-cb-up 34s linear infinite; } .sx-cb__col:nth-child(2n) .sx-cb__track { animation-direction: reverse; animation-duration: 42s; } .sx-cb__col:nth-child(3n) .sx-cb__track { animation-duration: 28s; }
@keyframes sx-cb-up { to { transform: translateY(-50%); } }
.sx-cb__t { position: relative; aspect-ratio: 9 / 16; margin: 0 0 8px; border-radius: 10px; overflow: hidden; background: #141414; border: 1px solid #ffffff1c; } .sx-cb__t.is-l { border-color: var(--pop-l); } .sx-cb__t.is-m { border-color: var(--pop-m); }.sx-cb__t img, .sx-cb__t .sx-clip__ph, .sx-cb__t video.sx-clip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sx-cb__t > i { position: absolute; left: 7px; top: 12px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #000; background: conic-gradient(from 40deg, var(--pop-l), #2a2a2a 45%, var(--pop-m)); } .sx-cb__t:nth-child(2n) > i { background: conic-gradient(from 200deg, #fff, #333 55%, var(--pop-l)); }
.sx-cb__t figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 7px 7px; background: linear-gradient(#0000, #000d); color: #fff; font: 600 9.5px/1.1 var(--sx-sans); letter-spacing: .03em; text-transform: uppercase; }
.sx-cb__gate { position: relative; display: grid; place-items: center; } .sx-cb__gate::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; background: repeating-linear-gradient(var(--pop-l) 0 5px, transparent 5px 10px); } .sx-cb__gate span { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 12px 9px; border-radius: 999px; background: var(--pop-l); color: #000; font: 700 11px/1 var(--sx-sans); letter-spacing: .08em; text-transform: uppercase; writing-mode: vertical-rl; } .sx-cb__gate i { font-style: normal; }
.sx-cb__q { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #ffffff12; color: #e6e6e6; font: 500 13px/1 var(--sx-sans); } .sx-cb__q .th { display: block; width: 26px; height: 40px; border-radius: 5px; overflow: hidden; background: linear-gradient(160deg, #2c2c2c, #151515); }.sx-cb__q img, .sx-cb__q video.sx-clip__img { width: 100%; height: 100%; object-fit: cover; display: block; } .sx-cb__q b { font-weight: 500; } .sx-cb__q u { text-decoration: none; padding: 4px 8px; border-radius: 999px; background: var(--pop-l); color: #000; font: 700 10px/1 var(--sx-sans); } .sx-cb__q.is-m u { background: none; color: var(--pop-m); box-shadow: inset 0 0 0 1px var(--pop-m); }
@media (prefers-reduced-motion: reduce) { .sx-cb__track { animation: none; } }
@media (max-width: 1100px) { .sx-cb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: auto; gap: 14px; } .sx-cb__arrow { display: none; } .sx-cb__wall { grid-column: 1 / -1; grid-row: 2; height: 340px; } .sx-cb__brief { grid-column: 1; grid-row: 1; } .sx-cb__queue { grid-column: 2; grid-row: 1; } .sx-cb__gate { grid-column: 1 / -1; grid-row: 3; height: 44px; } .sx-cb__gate::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1.5px; background: repeating-linear-gradient(90deg, var(--pop-l) 0 5px, transparent 5px 10px); } .sx-cb__gate span { writing-mode: horizontal-tb; padding: 9px 14px; } }
@media (max-width: 640px) { .sx-cb { grid-template-columns: minmax(0, 1fr); } .sx-cb__brief, .sx-cb__queue, .sx-cb__wall, .sx-cb__gate { grid-column: 1; grid-row: auto; } .sx-cb__queue { order: 4; } .sx-cb__wall { grid-template-columns: repeat(4, minmax(0, 1fr)); order: 2; height: 300px; } .sx-cb__gate { order: 3; } .sx-cb__col:nth-child(n+5) { display: none; } }
/* infrastructure: four modules on one bus */
.sx-inf { margin-top: clamp(40px, 5vw, 72px); }
.sx-inf__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.sx-inf__p { display: flex; flex-direction: column; padding: 16px; border: 1px solid #ffffff1f; border-radius: 18px; background: #0c0c0c; }
.sx-inf__h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: #6f6f6f; font: 500 11px/1 ui-monospace, Menlo, monospace; } .sx-inf__h u { text-decoration: none; color: var(--pop-l); font: 600 10px/1 var(--sx-sans); letter-spacing: .08em; text-transform: uppercase; } .sx-inf__h u i { margin-right: 5px; font-style: normal; }
.sx-inf__m { position: relative; height: 164px; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 12px; border-radius: 12px; background: #141414; border: 1px solid #ffffff10; overflow: hidden; }
.sx-inf__p h3 { margin: 14px 0 0; color: #fff; font: 600 clamp(15px, 1.25vw, 18px)/1.2 var(--sx-sans); letter-spacing: -.02em; }
.sx-inf__acc { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; color: #cfcfcf; font: 500 12px/1 var(--sx-sans); } .sx-inf__acc i { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(from 40deg, var(--pop-l), #2a2a2a 45%, var(--pop-m)); } .sx-inf__acc b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; } .sx-inf__acc u { text-decoration: none; padding: 3px 7px; border-radius: 999px; background: var(--pop-l); color: #000; font: 700 9.5px/1 var(--sx-sans); } .sx-inf__acc u.p { background: none; color: var(--pop-m); box-shadow: inset 0 0 0 1px var(--pop-m); }
.sx-inf__m--c { padding: 0; } .sx-inf__chart, .sx-inf__dots { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); overflow: visible; } .sx-inf__chart .g { stroke: #ffffff12; fill: none; vector-effect: non-scaling-stroke; } .sx-inf__chart .l { fill: none; stroke: var(--pop-l); stroke-width: 1.6; vector-effect: non-scaling-stroke; } .sx-inf__dots circle { fill: var(--pop-l); }
.sx-inf__s span { display: block; margin-bottom: 7px; color: #8d8d8d; font: 500 11px/1 var(--sx-sans); } .sx-inf__s .t { position: relative; height: 7px; border-radius: 4px; background: #ffffff1c; } .sx-inf__s .t b { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--pop-l); } .sx-inf__s .t i { position: absolute; left: var(--x); top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: #fff; } .sx-inf__s .t em { position: absolute; left: var(--x); top: -5px; bottom: -5px; width: 2px; background: var(--pop-m); font-size: 0; }
.sx-inf__pay { display: grid; grid-template-columns: 58px minmax(0, 1fr) 14px; align-items: center; gap: 8px; color: #cfcfcf; font: 500 12px/1 var(--sx-sans); } .sx-inf__pay b { display: block; height: 7px; width: var(--w); border-radius: 4px; background: #ffffff55; } .sx-inf__pay i { color: var(--pop-l); font-style: normal; }
.sx-inf__stamp { position: absolute; right: 10px; bottom: 8px; padding: 5px 9px; border: 1.5px solid var(--pop-m); border-radius: 6px; color: var(--pop-m); background: #141414; font: 700 11px/1 var(--sx-sans); letter-spacing: .1em; text-transform: uppercase; transform: rotate(-7deg); }
.sx-inf__bus { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); height: 46px; margin: 0; border-bottom: 1.5px dashed var(--pop-m); } .sx-inf__bus i { justify-self: center; width: 1.5px; background: repeating-linear-gradient(var(--pop-m) 0 4px, transparent 4px 8px); } .sx-inf__bus span { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 0 12px; background: #000; color: var(--pop-m); font: 600 11px/1.5 var(--sx-sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 1000px) { .sx-inf__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sx-inf__bus { grid-template-columns: repeat(2, 1fr); } .sx-inf__bus i:nth-child(n+3) { display: none; } }
@media (max-width: 560px) { .sx-inf__g { grid-template-columns: minmax(0, 1fr); } .sx-inf__bus { grid-template-columns: 1fr; } .sx-inf__bus i:nth-child(n+2) { display: none; } .sx-inf__bus span { font-size: 10px; } }
/* odds: a thousand cuts narrowing to the winners */
.sx-odds { display: grid; grid-template-columns: minmax(0, 5fr) 34px minmax(0, 2.5fr) 34px auto 34px auto; align-items: stretch; margin-top: clamp(40px, 5vw, 72px); }
.sx-odds__s { display: flex; flex-direction: column; min-width: 0; } .sx-odds__s > span { color: #6f6f6f; font: 500 11px/1 ui-monospace, Menlo, monospace; text-transform: uppercase; } .sx-odds__s strong { margin: 8px 0 14px; color: #fff; font: 700 clamp(16px, 1.45vw, 21px)/1.05 var(--sx-sans); letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; }
.sx-odds__f { position: relative; flex: 1; min-height: 0; } .sx-odds__f svg { display: block; width: 100%; height: auto; } .sx-odds__f .d { fill: #ffffff24; } .sx-odds__f .o { fill: var(--pop-m); animation: sx-odds-tw 3.4s ease-in-out infinite alternate; } @keyframes sx-odds-tw { from { opacity: .5; } to { opacity: 1; } }
.sx-odds__scan { position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; background: var(--pop-l); box-shadow: 0 0 14px var(--pop-l); animation: sx-odds-scan 7s linear infinite; } @keyframes sx-odds-scan { to { left: 100%; } }
.sx-odds__mid { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 1fr; gap: 4px; align-content: stretch; } .sx-odds__mid i { border-radius: 3px; background: #ffffff1c; } .sx-odds__mid i.w { background: var(--pop-m); }
.sx-odds__win { display: flex; gap: 10px; } .sx-odds__win figure { position: relative; margin: 0; height: 100%; aspect-ratio: 9 / 16; min-height: 220px; border-radius: 12px; overflow: hidden; border: 2px solid var(--pop-l); }.sx-odds__win img, .sx-odds__win video.sx-clip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sx-odds__win figcaption { position: absolute; left: 7px; bottom: 7px; padding: 4px 7px; border-radius: 999px; background: var(--pop-l); color: #000; font: 700 9.5px/1 var(--sx-sans); text-transform: uppercase; } .sx-odds__win figcaption i { margin-right: 4px; font-style: normal; }
.sx-odds__arr { position: relative; align-self: center; height: 1px; margin: 40px 4px 0; background: repeating-linear-gradient(90deg, var(--pop-l) 0 4px, transparent 4px 8px); } .sx-odds__arr::after { content: "▶"; position: absolute; right: -3px; top: -7px; color: var(--pop-l); font-size: 10px; line-height: 14px; }
.sx-odds__out { list-style: none; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; margin: 0; padding: 0; } .sx-odds__out li { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid #ffffff2e; border-radius: 999px; background: #0d0d0d; color: #fff; font: 600 13px/1 var(--sx-sans); white-space: nowrap; } .sx-odds__out i { color: var(--pop-l); font-style: normal; }
@media (prefers-reduced-motion: reduce) { .sx-odds__f .o, .sx-odds__scan { animation: none; } }
@media (max-width: 1000px) { .sx-odds { grid-template-columns: minmax(0, 1fr); gap: 26px; } .sx-odds__arr { display: none; } .sx-odds__mid { min-height: 150px; } .sx-odds__win figure { height: 240px; min-height: 0; } .sx-odds__out { flex-direction: row; flex-wrap: wrap; } }
/* creators: one phone walking through the five steps */
.sx-crsteps { --ph: min(72vh, 590px); --sw: calc(var(--ph) * .5); }
.sx-crsteps .lps__steps { padding-left: calc(var(--sw) + clamp(56px, 9vw, 130px)); }
.sx-crsteps .lps-step { display: flex; flex-direction: column; justify-content: center; min-height: 72vh; padding: 6vh 0; }
.sx-crsteps .lps-step__title { font-size: clamp(30px, 3.7vw, 56px); margin-top: 0; }
.sx-crsteps .lps-step__body { max-width: 520px; font-size: clamp(16px, 1.3vw, 19px); }
.sx-crphone { position: absolute; left: 0; top: 0; bottom: 0; }
.sx-crphone__in { position: sticky; top: calc(50vh - var(--ph) / 2 + 24px); }
.sx-crmob { display: none; }
.sx-phone { position: relative; box-sizing: border-box; width: var(--sw); height: var(--ph); border-radius: 34px; border: 1.5px solid #ffffff38; background: #0d0d0d; overflow: hidden; box-shadow: 0 30px 90px #000, 0 0 90px #84ff0014; }
.sx-phone__seg { position: absolute; left: 14px; right: 14px; top: 13px; display: flex; gap: 4px; z-index: 5; } .sx-phone__seg i { flex: 1; height: 3px; border-radius: 2px; background: #ffffff3d; transition: background .3s; } .sx-phone__seg i.on { background: var(--pop-l); }
.sx-phone__s { position: absolute; inset: 0; }
.sx-scr { position: absolute; inset: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; padding: 34px 14px 14px; opacity: 0; transform: scale(.97); transition: opacity .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1); color: #cfcfcf; font: 500 12px/1.2 var(--sx-sans); }
.sx-scr.is-on { opacity: 1; transform: none; }
.sx-scr .btn { display: block; margin-top: auto; padding: 13px; border-radius: 999px; background: var(--pop-l); color: #000; text-align: center; text-decoration: none; font: 700 13px/1 var(--sx-sans); }
.sx-scr .eb { font-style: normal; color: #8d8d8d; font: 500 10.5px/1 ui-monospace, Menlo, monospace; text-transform: uppercase; } .sx-scr .t { color: #fff; font: 700 24px/1 var(--sx-sans); letter-spacing: -.04em; text-transform: uppercase; }
.s-apply .h { display: flex; align-items: center; gap: 10px; } .s-apply .av { flex: none; width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(from 40deg, var(--pop-l), #2a2a2a 45%, var(--pop-m)); } .s-apply .h b { display: block; color: #fff; font-size: 15px; } .s-apply .h em { font-style: normal; color: #8d8d8d; font-size: 11px; }
.s-apply .g { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 4px; } .s-apply .g > * { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 6px; background: linear-gradient(160deg, #2a2a2a, #151515); display: block; }
.s-brief .src { position: relative; flex: 1; min-height: 0; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--pop-m); }.s-brief .src img, .s-brief .src video.sx-clip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .s-brief .w { position: absolute; left: 7px; right: 7px; bottom: 7px; height: 30px; padding: 3px 6px; border-radius: 6px; background: #000c; display: flex; align-items: center; gap: 1.5px; } .s-brief .w i { flex: 1; height: var(--h); background: #ffffff66; border-radius: 1px; } .s-brief .w i.m { background: var(--pop-m); }
.s-brief .r { display: flex; gap: 7px; align-items: center; color: #e6e6e6; font-size: 12.5px; } .s-brief .r i { color: var(--pop-l); font-style: normal; }
.s-cut .prev { position: relative; flex: 1; min-height: 0; border-radius: 12px; overflow: hidden; }.s-cut .prev img, .s-cut .prev video.sx-clip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .s-cut .cap { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); padding: 5px 9px; background: var(--pop-l); color: #000; font: 800 13px/1 var(--sx-sans); text-transform: uppercase; white-space: nowrap; }
.s-cut .tr { position: relative; display: flex; flex-direction: column; gap: 4px; } .s-cut .ph { position: absolute; left: 42%; top: -5px; bottom: -5px; width: 2px; background: #fff; z-index: 2; animation: sx-cr-ph 4s ease-in-out infinite alternate; } @keyframes sx-cr-ph { to { left: 72%; } } .s-cut .row { display: flex; gap: 3px; height: 20px; } .s-cut .row i { display: block; width: var(--w); border-radius: 4px; background: #ffffff1f; } .s-cut .row i.l { background: var(--pop-l); } .s-cut .row i.m { background: var(--pop-m); } .s-cut .row i.w { background: #fff; }
.s-cut .tools { display: flex; justify-content: space-between; gap: 6px; } .s-cut .tools u { flex: 1; padding: 8px 0; border-radius: 8px; background: #ffffff12; color: #fff; text-align: center; text-decoration: none; font-size: 11px; font-weight: 600; }
.s-post { padding: 0; }.s-post > img, .s-post > video.sx-clip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .s-post::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(#0000, #000d); } .s-post .toast { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); z-index: 3; display: inline-flex; gap: 6px; padding: 8px 13px; border-radius: 999px; background: var(--pop-l); color: #000; font: 700 12px/1 var(--sx-sans); white-space: nowrap; } .s-post .toast i { font-style: normal; } .s-post .sx-post { z-index: 3; right: 12px; bottom: 110px; } .s-post .ft { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; display: flex; flex-direction: column; gap: 5px; } .s-post .ft b { color: #fff; font-size: 15px; } .s-post .ft em { font-style: normal; color: #e6e6e6; } .s-post .ft u { align-self: flex-start; margin-top: 4px; padding: 5px 8px; border: 1px solid var(--pop-l); border-radius: 999px; color: var(--pop-l); text-decoration: none; font: 600 10px/1 var(--sx-sans); }
.s-paid svg { flex: 1; min-height: 0; width: 100%; } .s-paid .l { fill: none; stroke: var(--pop-l); stroke-width: 2.6; vector-effect: non-scaling-stroke; } .s-paid .c { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 11.5px; } .s-paid .c b { display: block; height: 7px; width: var(--w); border-radius: 4px; background: var(--pop-m); } .s-paid .pd { margin-top: 2px; padding: 14px; border-radius: 16px; background: var(--pop-l); color: #000; } .s-paid .pd strong { display: block; font: 700 34px/.95 var(--sx-sans); letter-spacing: -.05em; } .s-paid .pd span { font-size: 12px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .s-cut .ph { animation: none; } .sx-scr { transition: none; } }
@media (max-width: 860px) { .sx-crsteps { --ph: 500px; } .sx-crsteps .lps__steps { padding-left: 0; } .sx-crphone { display: none; } .sx-crmob { display: block; margin-bottom: 24px; } .sx-crmob .sx-phone { margin: 0 auto; } .sx-crsteps .lps-step { min-height: 0; opacity: 1 !important; transform: none !important; padding: 5vh 0; } }
.sx-odds__mid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 1000px) { .sx-odds__out { justify-content: flex-start; } }
/* home: control-room monitor walking through Direct / Edit / Distribute / Learn */
.sx-homesteps { --ph: min(70vh, 540px); --sw: clamp(400px, 40vw, 560px); }
.sx-homesteps .lps__steps { padding-left: calc(var(--sw) + clamp(44px, 6vw, 90px)); }
.sx-mon { box-sizing: border-box; width: var(--sw); height: var(--ph); display: flex; flex-direction: column; border-radius: 24px; border: 1.5px solid #ffffff2e; background: #0c0c0c; overflow: hidden; box-shadow: 0 30px 90px #000, 0 0 100px #84ff0012; }
.sx-mon__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid #ffffff1a; } .sx-mon__tabs span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 4px; color: #6f6f6f; font: 600 11.5px/1 var(--sx-sans); letter-spacing: .06em; text-transform: uppercase; transition: color .3s, background .3s; } .sx-mon__tabs i { font-style: normal; } .sx-mon__tabs span.on { color: #fff; } .sx-mon__tabs span.on i { color: var(--pop-l); } .sx-mon__tabs span.now { background: var(--pop-l); color: #000; } .sx-mon__tabs span.now i { color: #000; }
.sx-mon__s { position: relative; flex: 1; min-height: 0; } .sx-mon .sx-scr { padding: 14px; }
.sx-mon .lb { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #8d8d8d; font: 500 11px/1 ui-monospace, Menlo, monospace; text-transform: uppercase; } .sx-mon .lb i { margin-right: 5px; font-style: normal; color: var(--pop-l); }
.m-dir .fr { position: relative; flex: 1; min-height: 0; border-radius: 12px; overflow: hidden; }.m-dir .fr > img, .m-dir .fr > video.sx-clip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.m-dir .b { position: absolute; width: 20px; height: 20px; border: 2px solid var(--pop-l); } .m-dir .tl { left: 10px; top: 10px; border-right: 0; border-bottom: 0; } .m-dir .tr { right: 10px; top: 10px; border-left: 0; border-bottom: 0; } .m-dir .bl { left: 10px; bottom: 10px; border-right: 0; border-top: 0; } .m-dir .br { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
.m-dir .tg { position: absolute; padding: 6px 9px; border-radius: 999px; background: #000c; color: #fff; font: 600 10.5px/1 var(--sx-sans); box-shadow: inset 0 0 0 1px var(--pop-m); } .m-dir .a { left: 12%; top: 18%; } .m-dir .b2 { right: 12%; top: 40%; } .m-dir .c2 { left: 26%; bottom: 14%; }
.m-dir .wv { position: relative; height: 62px; border-radius: 8px; background: #151515; } .m-dir .bars { position: absolute; inset: 6px; display: flex; align-items: center; gap: 2px; } .m-dir .bars i { flex: 1; height: var(--h); border-radius: 1px; background: #ffffff33; } .m-dir .bars i.m { background: var(--pop-m); } .m-dir .mk { position: absolute; top: 2px; bottom: 2px; border: 1.5px solid var(--pop-l); border-radius: 5px; } .m-dir .ph { position: absolute; top: -3px; bottom: -3px; left: 6%; width: 2px; background: #fff; animation: sx-mon-ph 8s linear infinite alternate; } @keyframes sx-mon-ph { to { left: 92%; } }
.sx-mon .av { display: flex; } .sx-mon .av i { width: 20px; height: 20px; margin: 0 0 0 -6px; border-radius: 50%; border: 1.5px solid #0c0c0c; background: conic-gradient(from 40deg, var(--pop-l), #2a2a2a 45%, var(--pop-m)); } .sx-mon .av i:nth-child(2n) { background: conic-gradient(from 200deg, #fff, #333 55%, var(--pop-l)); }
.m-edit .g { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 5px; } .m-edit figure { position: relative; margin: 0; min-height: 0; border-radius: 8px; overflow: hidden; background: #151515; border: 1px solid #ffffff1c; } .m-edit figure.l { border-color: var(--pop-l); } .m-edit figure.m { border-color: var(--pop-m); }.m-edit img, .m-edit .sx-clip__ph, .m-edit video.sx-clip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .m-edit figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 5px 5px; background: linear-gradient(#0000, #000d); color: #fff; font: 600 8.5px/1.05 var(--sx-sans); text-transform: uppercase; }
.m-dist .bu { position: absolute; left: 50%; top: 45%; width: min(84%, 430px); aspect-ratio: 1; transform: translate(-50%, -50%); color: var(--pop-l); } .m-dist .bu svg { width: 100%; height: 100%; animation: sx-spin 140s linear infinite; } .m-dist .bu path { stroke: currentColor; stroke-width: .7; opacity: .5; fill: none; } .m-dist .bu circle { fill: currentColor; } .m-dist .bu circle.o { fill: none; stroke: currentColor; stroke-width: 1; } .m-dist .bu path.s { fill: currentColor; stroke: 0; opacity: 1; }
.m-dist .p { position: absolute; z-index: 2; display: inline-flex; gap: 6px; padding: 9px 13px; border-radius: 999px; background: #000; border: 1px solid #ffffff3a; color: #fff; font: 600 12px/1 var(--sx-sans); white-space: nowrap; } .m-dist .p i { color: var(--pop-m); font-style: normal; } .m-dist .p1 { left: 5%; top: 11%; } .m-dist .p2 { right: 5%; top: 37%; } .m-dist .p3 { left: 9%; top: 66%; }
.m-dist .fd { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 6px; } .m-dist .lv { padding: 6px 9px; border-radius: 999px; background: var(--pop-l); color: #000; font: 700 10.5px/1 var(--sx-sans); text-transform: uppercase; } .m-dist .fd u { padding: 6px 9px; border-radius: 999px; background: #000; border: 1px solid #ffffff26; color: #cfcfcf; text-decoration: none; font: 500 10.5px/1 var(--sx-sans); }
.m-learn svg { flex: 1; min-height: 0; width: 100%; } .m-learn .g { stroke: #ffffff12; fill: none; vector-effect: non-scaling-stroke; } .m-learn .l { fill: none; stroke: var(--pop-l); stroke-width: 2.6; vector-effect: non-scaling-stroke; } .m-learn svg .m { fill: none; stroke: var(--pop-m); stroke-width: 1.6; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.m-learn .tog { display: inline-flex; padding: 2px; border-radius: 999px; background: #000; border: 1px solid #ffffff24; font: 600 9px/1 var(--sx-sans); } .m-learn .tog u { padding: 4px 7px; border-radius: 999px; text-decoration: none; } .m-learn .tog .on { background: var(--pop-l); color: #000; }
.m-learn .c { display: grid; grid-template-columns: 76px minmax(0, 1fr) 44px; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #ffffff12; color: #e6e6e6; font-size: 12.5px; } .m-learn .c b { display: block; height: 7px; width: var(--w); border-radius: 4px; background: var(--pop-l); } .m-learn .c u { justify-self: end; padding: 3px 7px; border-radius: 999px; background: var(--pop-l); color: #000; text-decoration: none; font: 700 10px/1 var(--sx-sans); } .m-learn .c.k b { background: #ffffff33; } .m-learn .c.k u { background: none; color: var(--pop-m); box-shadow: inset 0 0 0 1px var(--pop-m); }
.m-learn .ag { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border: 1.5px dashed var(--pop-m); border-radius: 12px; color: var(--pop-m); font: 600 12.5px/1 var(--sx-sans); } .m-learn .ag i { font-style: normal; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .m-dir .ph, .m-dist .bu svg { animation: none; } }
@media (max-width: 860px) { .sx-homesteps { --ph: 430px; --sw: 100%; } .sx-homesteps .lps__steps { padding-left: 0; } .m-edit .g { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); } .sx-mon__tabs span { font-size: 9.5px; letter-spacing: 0; gap: 3px; } .m-dist .p { font-size: 11px; padding: 7px 10px; } }
.sx-crsteps .lps-step__title-2 .sx-nb { display: block; } .sx-crsteps .lps-step__title-2 br { display: none; }
.sx-homesteps .lps-step__title { font-size: clamp(28px, 3.1vw, 46px); }
/* round 6: we provide / you vary and post / you get paid */
.sx-flow { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.35fr) 28px minmax(0, 1fr); align-items: stretch; margin-top: 28px; }
.sx-flow__s { display: flex; flex-direction: column; min-width: 0; padding: 14px; border: 1px solid #ffffff24; border-radius: 16px; background: #0d0d0d; }
.sx-flow__v { display: flex; align-items: center; justify-content: center; height: 132px; }
.sx-flow__src { height: 100%; aspect-ratio: 9 / 16; margin: 0; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--pop-l); }.sx-flow__src img, .sx-flow__src video.sx-clip__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sx-flow__fan figure { position: relative; flex: none; height: 118px; aspect-ratio: 9 / 16; margin: 0 0 0 -14px; border-radius: 9px; overflow: hidden; border: 1px solid #ffffff38; background: #111; }
.sx-flow__fan figure:first-child { margin-left: 0; transform: rotate(-7deg); } .sx-flow__fan figure:nth-child(2) { z-index: 1; } .sx-flow__fan figure:last-child { transform: rotate(7deg); }.sx-flow__fan img, .sx-flow__fan .sx-clip__ph, .sx-flow__fan video.sx-clip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-flow__s--paid { border-color: transparent; background: var(--pop-l); color: #000; } .sx-flow__s--paid b { font: 700 clamp(38px, 3.6vw, 52px)/.9 var(--sx-sans); letter-spacing: -.05em; }
.sx-flow__c { margin: 12px 0 0; } .sx-flow__c strong { display: block; color: #fff; font: 600 15px/1.15 var(--sx-sans); letter-spacing: -.01em; } .sx-flow__c span { display: block; margin-top: 5px; color: #8d8d8d; font: 400 12.5px/1.3 var(--sx-sans); }
.sx-flow__s--paid .sx-flow__c strong { color: #000; } .sx-flow__s--paid .sx-flow__c span { color: #000b; }
.sx-flow__a { position: relative; align-self: center; border-top: 1.5px dashed var(--pop-m); } .sx-flow__a::after { content: "▶"; position: absolute; right: -1px; top: -8px; color: var(--pop-m); font-size: 9px; line-height: 14px; }
@media (max-width: 640px) { .sx-flow { grid-template-columns: minmax(0, 1fr); } .sx-flow__s { align-items: center; text-align: center; } .sx-flow__a { justify-self: center; align-self: auto; width: 0; height: 26px; border-top: 0; border-left: 1.5px dashed var(--pop-m); } .sx-flow__a::after { content: "▼"; right: auto; left: -6px; top: auto; bottom: -3px; } .sx-flow__s--paid .sx-flow__v { height: 76px; } }
.sx-src__m6 { display: none; }
@media (max-width: 860px) {
  /* mobile: Home and Creators 1-2-3-4 steps centred */
  .sx-crsteps .lps-step { justify-items: center; text-align: center; }
  .sx-crsteps .sx-crmob { display: flex; justify-content: center; width: 100%; text-align: left; }
  .sx-crsteps .sx-crmob .sx-phone, .sx-crsteps .sx-crmob .sx-mon { margin: 0 auto; }
  .sx-crsteps .lps-step__title, .sx-crsteps .lps-step__body { justify-self: stretch; width: 100%; text-align: center; }
  .sx-crsteps .lps-step__title-2 { display: block; text-align: center; }
  .sx-crsteps .lps-step__body { margin-left: auto; margin-right: auto; }
  /* mobile: more air in each service cell */
  .sx-svc__cell { padding-top: 34px; padding-bottom: 34px; }
  /* mobile: Viral Moments anatomy centred, number above text */
  .sx-anat__c { flex-direction: column-reverse; align-items: center; justify-content: center; gap: 10px; text-align: center; }
  .sx-anat__t { flex: none; } .sx-anat__c--l .sx-anat__t, .sx-anat__c--r .sx-anat__t { text-align: center; }
  /* mobile: Work showcase reads top to bottom: one moment, every format, tracked */
  .sx-src { align-items: stretch; gap: 0; } .sx-src__col { width: 100%; } .sx-src__frame { width: 100%; }
  .sx-src__col--e { position: relative; padding-top: 38px; } .sx-src__col--e::before, .sx-src__views::before { content: ""; position: absolute; left: 50%; height: 28px; border-left: 1.5px dashed var(--pop-l); }
  .sx-src__col--e::before { top: 5px; }
  .sx-src__edits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .sx-src__edits figure { width: auto; } .sx-src__m6 { display: block; }
  .sx-src__views { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 38px; max-width: none; } .sx-src__views::before { top: -33px; } .sx-src__views strong { margin: 0; }
}
/* nav: seven links need one clean line, otherwise use the menu */
.sx-nav__links a, .sx-nav__cta, .sx-nav__join { white-space: nowrap; }
@media (max-width: 1239px) { .sx-nav__links, .sx-nav__join { display: none; } .sx-menu { display: block; margin-left: auto; } .sx-nav .sx-nav__cta { display: none; } }
/* desktop nav: centred, tightened pill */
@media (min-width: 1240px) {
  .sx-nav__links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); gap: 0; margin: 0; padding: 4px; border: 1px solid #ffffff24; border-radius: 999px; background: #0f0f0f; }
  .sx-nav__links a { padding: 8px 11px; border-radius: 999px; font-size: 13px; line-height: 1; opacity: .78; transition: background .15s, opacity .15s; } .sx-nav__links a:hover { opacity: 1; background: #ffffff14; } .sx-nav__links a[aria-current] { background: #ffffff14; }
  .sx-nav.sx-nav--v1 .sx-nav__join { margin-left: auto !important; } .sx-nav .sx-nav__cta { margin-left: 10px; }
}
@media (min-width: 861px) { .sx-hero2--cr .sx-hero2__h1 em { white-space: nowrap; } }
/* nav: current page in lime */
.sx-nav__links a[aria-current], .sx-nav__join[aria-current], .sx-menu nav a[aria-current] { color: var(--pop-l); opacity: 1; }
@media (max-width: 860px) { .sx-mocknote { text-align: center; } }
/* Distribution Engine hero: content in, one engine, every network out */
.sx-eng { position: relative; height: clamp(440px, 44vw, 640px); }
.sx-eng__ln { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .sx-eng__ln path { fill: none; stroke: var(--pop-m); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.sx-eng__in { position: absolute; z-index: 3; left: 0; top: 50%; width: 14%; aspect-ratio: 9 / 16; margin: 0; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--pop-l); background: #111; transform: translateY(-50%); }.sx-eng__in img, .sx-eng__in video.sx-clip__img { display: block; width: 100%; height: 100%; object-fit: cover; } .sx-eng__in figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 4px; background: var(--pop-l); color: #000; font: 700 10px/1 var(--sx-sans); text-align: center; }
.sx-eng__c { position: absolute; z-index: 2; left: 42%; top: 50%; width: min(52%, 74vh); aspect-ratio: 1; transform: translate(-50%, -50%); } .sx-eng__c > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sx-eng__c .t { animation: sx-spin 70s linear infinite; } .sx-eng__c .t path { stroke: #ffffff4d; stroke-width: 1.2; fill: none; }
.sx-eng__c .n { animation: sx-spin 44s linear infinite reverse; } .sx-eng__c .r { fill: none; stroke: var(--pop-m); stroke-width: 1; stroke-dasharray: 3 5; } .sx-eng__c .n circle.p { fill: var(--pop-l); } .sx-eng__c .n circle.o { fill: #000; stroke: var(--pop-l); stroke-width: 1.4; }
.sx-eng__c .i { fill: #000; stroke: #ffffff3a; stroke-width: 1; } .sx-eng__c .c { fill: var(--pop-l); } .sx-eng__c .s { fill: #000; }
.sx-eng__s { animation: none; transform: translate(-50%, -50%); } .sx-eng__s--n { left: 50%; top: 12.7%; } .sx-eng__s--e { left: 87.3%; top: 50%; } .sx-eng__s--s { left: 50%; top: 87.3%; } .sx-eng__s--w { left: 12.7%; top: 50%; }
.sx-eng__os { position: absolute; z-index: 3; right: 0; top: 0; bottom: 0; width: 25%; display: flex; flex-direction: column; justify-content: space-around; }
.sx-eng__o { display: flex; align-items: center; gap: 7px; padding: 13px 12px; border: 1px solid #ffffff2e; border-radius: 12px; background: #0d0d0d; } .sx-eng__o i { color: var(--pop-m); font-style: normal; font-size: 12px; } .sx-eng__o b { flex: 1; min-width: 0; color: #fff; font: 600 12.5px/1.1 var(--sx-sans); } .sx-eng__o u { padding: 3px 6px; border-radius: 999px; background: var(--pop-l); color: #000; font: 700 9.5px/1 var(--sx-sans); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .sx-eng__c .t, .sx-eng__c .n { animation: none; } }
@media (max-width: 860px) { .sx-eng { height: auto; display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 12px; } .sx-eng__ln, .sx-eng__in { display: none; } .sx-eng__c { position: relative; left: auto; top: auto; width: min(86%, 380px); transform: none; } .sx-eng__s { padding: 7px 10px; font-size: 11px; } .sx-eng__os { position: static; width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; } .sx-eng__o { padding: 9px 11px; } }
/* For Agencies hero: your name on the front, our engine behind it */
.sx-ag { position: relative; height: clamp(440px, 44vw, 640px); }
.sx-ag__b { position: absolute; z-index: 1; left: 6%; top: 5%; width: 66%; height: 70%; padding: 20px; border-radius: 22px; overflow: hidden; background: var(--pop-l); color: #000; transform: rotate(-6deg); } .sx-ag__b > span { position: relative; z-index: 1; display: inline-flex; gap: 6px; font: 700 15px/1 var(--sx-sans); letter-spacing: -.01em; white-space: nowrap; } .sx-ag__b > span i { font-style: normal; }
.sx-ag__burst { position: absolute; left: -22%; bottom: -30%; width: 90%; aspect-ratio: 1; color: #000; } .sx-ag__burst svg { display: block; width: 100%; height: 100%; animation: sx-spin 140s linear infinite; } .sx-ag__burst path { stroke: currentColor; stroke-width: .7; opacity: .55; fill: none; } .sx-ag__burst circle { fill: currentColor; } .sx-ag__burst circle.o { fill: none; stroke: currentColor; stroke-width: 1; } .sx-ag__burst path.s { fill: currentColor; stroke: 0; opacity: 1; }
.sx-ag__f { position: absolute; z-index: 2; right: 2%; top: 19%; width: 68%; height: 68%; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: clamp(12px, 1.5vw, 20px); border: 1px solid #ffffff38; border-radius: 22px; background: #0d0d0d; box-shadow: 0 0 0 6px #000; transform: rotate(3deg); }
.sx-ag__f .h { display: flex; align-items: center; gap: 9px; } .sx-ag__f .h i { width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(from 40deg, var(--pop-l), #2a2a2a 45%, var(--pop-m)); } .sx-ag__f .h b { flex: 1; color: #fff; font: 700 clamp(14px, 1.3vw, 18px)/1 var(--sx-sans); letter-spacing: -.02em; } .sx-ag__f .h u { padding: 5px 8px; border: 1px solid #ffffff2e; border-radius: 999px; color: #b9b9b9; font: 600 10px/1 var(--sx-sans); text-decoration: none; }
.sx-ag__f .ch { flex: 1 1 0; min-height: 0; } .sx-ag__f .ch svg { display: block; width: 100%; height: 100%; } .sx-ag__f .ch path { fill: none; vector-effect: non-scaling-stroke; } .sx-ag__f .ch .l { stroke: var(--pop-l); stroke-width: 2; } .sx-ag__f .ch .d { stroke: var(--pop-m); stroke-width: 1.4; stroke-dasharray: 4 4; }
.sx-ag__f .th { flex: 0 0 34%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; min-height: 0; } .sx-ag__f .th figure { position: relative; margin: 0; border-radius: 9px; overflow: hidden; background: #171717; border: 1px solid #ffffff1f; }.sx-ag__f .th img, .sx-ag__f .th .sx-clip__ph, .sx-ag__f .th video.sx-clip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-ag__pill { right: 0; top: 11%; z-index: 4; }
.sx-ag__cls { position: absolute; z-index: 3; left: 0; bottom: 5%; display: flex; flex-direction: column; gap: 7px; } .sx-ag__cl { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #ffffff2e; border-radius: 999px; background: #000; color: #e6e6e6; font: 500 12px/1 var(--sx-sans); } .sx-ag__cl i { width: 7px; height: 7px; border-radius: 50%; background: var(--pop-l); }
@media (prefers-reduced-motion: reduce) { .sx-ag__burst svg { animation: none; } }
@media (max-width: 860px) { .sx-ag { height: 104vw; max-height: 560px; margin-top: 12px; } .sx-ag__b { padding: 13px; border-radius: 16px; } .sx-ag__b > span { font-size: 12px; } .sx-ag__f { border-radius: 16px; gap: 8px; } .sx-ag__f .h i { width: 20px; height: 20px; } .sx-ag__f .h u { font-size: 8.5px; padding: 4px 6px; } .sx-ag__f .th { gap: 4px; } .sx-ag__pill { padding: 7px 10px; font-size: 11px; top: 9%; } .sx-ag__cl { padding: 6px 9px; font-size: 10.5px; } .sx-ag__cls { gap: 5px; bottom: 2%; } }
/* For Brands hero: one moment, everywhere */
@media (min-width: 861px) { .sx-bhero .sx-workhero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.sx-bhero .sx-pagehead__h1 { font-size: clamp(44px, 4.6vw, 76px) !important; }
.sx-bh { position: relative; height: clamp(440px, 44vw, 640px); }
.sx-bh__burst { position: absolute; left: 50%; top: 50%; width: min(100%, 680px); aspect-ratio: 1; transform: translate(-50%, -50%); color: var(--pop-l); } .sx-bh__burst svg { display: block; width: 100%; height: 100%; animation: sx-spin 140s linear infinite; }
.sx-bh__burst path { stroke: currentColor; stroke-width: .7; opacity: .5; fill: none; } .sx-bh__burst circle { fill: currentColor; } .sx-bh__burst circle.o { fill: none; stroke: currentColor; stroke-width: 1; } .sx-bh__burst path.s { display: none; }
.sx-bh__t { position: absolute; z-index: 2; width: 15%; aspect-ratio: 9 / 16; margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid #ffffff2e; background: #111; transform: rotate(var(--r)); }.sx-bh__t img, .sx-bh__t .sx-clip__ph, .sx-bh__t video.sx-clip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-bh__m { position: absolute; z-index: 3; left: 50%; top: 50%; width: 30%; aspect-ratio: 9 / 16; margin: 0; border-radius: 20px; overflow: hidden; border: 2px solid var(--pop-l); background: #111; transform: translate(-50%, -50%); box-shadow: 0 0 0 6px #000; }.sx-bh__m img, .sx-bh__m video.sx-clip__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sx-bh__m figcaption { position: absolute; left: 10px; bottom: 10px; display: inline-flex; gap: 5px; padding: 7px 10px; border-radius: 999px; background: var(--pop-l); color: #000; font: 700 11px/1 var(--sx-sans); white-space: nowrap; } .sx-bh__m figcaption i { font-style: normal; }
.sx-bh__p { position: absolute; z-index: 5; display: inline-flex; gap: 6px; padding: 10px 14px; border-radius: 999px; border: 1px solid #ffffff3a; background: #000; color: #fff; font: 600 13px/1 var(--sx-sans); white-space: nowrap; animation: sx-float 5s ease-in-out infinite alternate; } .sx-bh__p i { color: var(--pop-m); font-style: normal; }
.sx-bh__p--a { left: 22%; top: 6%; } .sx-bh__p--b { right: 19%; top: 34%; animation-delay: -2s; } .sx-bh__p--c { left: 24%; bottom: 7%; animation-delay: -3.5s; }
@media (prefers-reduced-motion: reduce) { .sx-bh__burst svg, .sx-bh__p { animation: none; } }
@media (max-width: 860px) { .sx-bh { height: 112vw; max-height: 560px; margin-top: 12px; } .sx-bh__m { width: 38%; border-radius: 16px; } .sx-bh__t { width: 19%; border-radius: 9px; } .sx-bh__p { padding: 7px 10px; font-size: 11px; } .sx-bh__p--a { left: 21%; top: 5%; } .sx-bh__p--b { right: 6%; top: 37%; } .sx-bh__p--c { left: 22%; bottom: 5%; } .sx-bh__m figcaption { left: 7px; bottom: 7px; padding: 5px 8px; font-size: 9.5px; } }

/* clip tiles: real clips in the blank tiles */
video.sx-clip__ph { width: 100%; height: 100%; object-fit: cover; display: block; }
video.sx-clip__img { display: block; max-width: 100%; object-fit: cover; }
/* Engine hero: "for distribution." holds one line, so the copy column takes more room */
@media (min-width: 861px) { .sx-ehero .sx-workhero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .sx-ehero .sx-pagehead__h1 { font-size: clamp(40px, 4.3vw, 72px) !important; } }