/* LP lab: "See it in action" experiments */

.lx {
  --lx-ink: #07100c;
  --lx-grey: #666d69;
  --lx-soft: #98a09b;
  --lx-line: rgba(7, 16, 12, 0.08);
  --lx-line-strong: rgba(7, 16, 12, 0.13);
  --lx-violet: #7f42fd;
  /* The AI scanning visual's panel: white on top, a pink glow up the right side, violet along the bottom */
  --lx-scan-bg:
    radial-gradient(45% 50% at 100% 42%, rgba(240, 149, 248, 0.95), rgba(240, 149, 248, 0.5) 45%, rgba(240, 149, 248, 0) 100%),
    linear-gradient(174deg, #fff 0%, #fff 27%, #fbeffe 38%, #f7c8fe 49%, #f19bf4 60%, #e08ef4 66%, #b786fb 71%, #897bf4 77%, #7163ee 82%, #6953f3 88%);
  width: 100%;
  color: var(--lx-ink);
  font-family: "Matter Regular", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.lx *,
.lx *::before,
.lx *::after {
  box-sizing: border-box;
}

@media (max-width: 809.98px) {
  .lx-see .lx-head {
    display: none;
  }
}

.lx-anchor {
  scroll-margin-top: 72px;
}

.lx-sec {
  padding: clamp(72px, 8vw, 120px) 0;
}

.lx-wrap {
  width: min(1200px, 100% - 48px);
  margin-inline: auto;
}

/* Type */

.lx-head {
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  text-align: center;
}

.lx-h2 {
  margin: 0;
  color: var(--lx-ink);
  font-family: "Matter Medium", sans-serif;
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.lx-accent {
  background: linear-gradient(135deg, #7f42fd, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.lx-lead {
  max-width: 34em;
  margin: 20px auto 0;
  color: var(--lx-grey);
  font-size: 18px;
  line-height: 1.6;
}

.lx-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--lx-ink);
  font-family: "Matter Medium", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}

.lx-mark__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--lx-ink);
  color: #fff;
}

.lx-mark__icon svg {
  width: 16px;
  height: 16px;
}

.lx-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  color: var(--lx-ink);
  font-family: "Matter Medium", sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.lx-link svg,
.lx-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.lx-link:hover svg,
.lx-btn:hover svg {
  transform: translateX(3px);
}

/* D: feature rows, Aikido-style. Copy with chips on one side, a visual on the other.
   Visuals show their final state by default; with JS (.lx-js) they wait off-screen in their start state
   and play when [data-lxd-live] gets .is-live. */

.lxd .lx-head {
  margin-bottom: clamp(56px, 7vw, 104px);
}

.lxd-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
}

.lxd-row--flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.lxd-row--flip .lxd-row__copy {
  order: 2;
}

.lxd-row + .lxd-row,
.lxd-row + .lxd-tag {
  margin-top: clamp(88px, 10vw, 144px);
}

.lxd-h3 {
  margin: 20px 0 0;
  color: var(--lx-ink);
  font-family: "Matter Medium", sans-serif;
  font-size: clamp(1.875rem, 1.3rem + 1.4vw, 2.625rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.lxd-text {
  max-width: 420px;
  margin: 16px 0 0;
  color: var(--lx-grey);
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}

.lxd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 460px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.lxd-chips li {
  padding: 8px 13px;
  border: 1px solid rgba(7, 16, 12, 0.14);
  border-radius: 8px;
  background: #fff;
  color: var(--lx-ink);
  font-size: 14px;
  line-height: 1.15;
  white-space: nowrap;
}

.lxd-vis {
  position: relative;
  overflow: hidden;
  min-height: 540px;
  border-radius: 28px;
  isolation: isolate;
  container-type: inline-size;
}

.lxd-vis--delisting1,
.lxd-vis--delisting2,
.lxd-vis--delisting3,
.lxd-vis--auto1,
.lxd-vis--auto2,
.lxd-vis--auto3,
.lxd-vis--removals3 {
  display: grid;
  place-items: center;
  padding: 44px 36px;
}

.lxd-frame {
  position: absolute;
  top: clamp(32px, 8.5cqi, 56px);
  left: clamp(24px, 7cqi, 48px);
  width: clamp(820px, 178cqi, 1200px);
  overflow: hidden;
  border-radius: 14px 0 0;
  background: #121118;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 40px 90px -30px rgba(24, 4, 70, 0.8);
}

.lxd-frame__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
}

.lxd-frame__bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}

.lxd-frame__bar i:nth-child(2) {
  background: #febc2e;
}

.lxd-frame__bar i:nth-child(3) {
  background: #28c840;
}

.lxd-frame__bar span {
  min-width: 0;
  margin-left: 14px;
  padding: 5px 14px;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lxd-frame__shot {
  display: block;
  width: 100%;
  height: auto;
}

/* Removals 1: the sites we file with, orbiting the BranditScan mark */

.lxd-vis--removals1 {
  background:
    radial-gradient(42% 46% at 50% 50%, rgba(127, 66, 253, 0.12), rgba(127, 66, 253, 0) 70%),
    radial-gradient(70% 70% at 50% 50%, #fff 0%, #f5f2fc 58%, #ece6f8 100%);
}

.lxd-orbit {
  position: absolute;
  inset: 0;
}

.lxd-orbit__ring {
  position: absolute;
  inset: 0;
  animation: lxd-spin var(--dur) linear infinite paused;
}

.lxd-orbit__ring::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border: 1px solid rgba(127, 66, 253, 0.16);
  border-radius: 50%;
  translate: -50% -50%;
}

.lxd-orbit__ring--1 {
  --r: max(16cqi, 74px);
  --dur: 60s;
}

.lxd-orbit__ring--2 {
  --r: max(28.5cqi, 126px);
  --dur: 90s;
  animation-name: lxd-unspin;
}

.lxd-orbit__ring--3 {
  --r: max(41cqi, 176px);
  --dur: 120s;
}

.lxd-orbit__site {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1));
}

.lxd-orbit__site > span {
  position: absolute;
  top: -24px;
  left: -24px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(7, 16, 12, 0.05), 0 10px 22px -10px rgba(45, 20, 110, 0.4);
  animation: lxd-unspin var(--dur) linear infinite paused;
}

.lxd-orbit__ring--2 .lxd-orbit__site > span {
  animation-name: lxd-spin;
}

.lxd-orbit__site > span::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid #46ce84;
  border-radius: 50%;
  opacity: 0;
}

.lxd-orbit__site img,
.lxd-app__sites img {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: contain;
}

.lxd-vis.is-live .lxd-orbit__ring,
.lxd-vis.is-live .lxd-orbit__site > span {
  animation-play-state: running;
}

.lxd-vis.is-live .lxd-orbit__ring--1 .lxd-orbit__site:nth-child(2) > span::after,
.lxd-vis.is-live .lxd-orbit__ring--2 .lxd-orbit__site:nth-child(4) > span::after,
.lxd-vis.is-live .lxd-orbit__ring--3 .lxd-orbit__site:nth-child(3) > span::after,
.lxd-vis.is-live .lxd-orbit__ring--3 .lxd-orbit__site:nth-child(8) > span::after {
  animation: lxd-ping 4.2s ease-out infinite;
}

.lxd-vis.is-live .lxd-orbit__ring--2 .lxd-orbit__site:nth-child(4) > span::after {
  animation-delay: 1.1s;
}

.lxd-vis.is-live .lxd-orbit__ring--3 .lxd-orbit__site:nth-child(3) > span::after {
  animation-delay: 2.2s;
}

.lxd-vis.is-live .lxd-orbit__ring--3 .lxd-orbit__site:nth-child(8) > span::after {
  animation-delay: 3.1s;
}

.lxd-orbit__core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 28px;
  background: #07100c;
  box-shadow: 0 0 0 10px rgba(127, 66, 253, 0.06), 0 0 0 22px rgba(127, 66, 253, 0.04), 0 24px 50px -16px rgba(30, 12, 80, 0.55);
  translate: -50% -50%;
}

.lxd-orbit__core svg {
  width: 46px;
  height: 46px;
  color: #46ce84;
}

.lxd-stat {
  position: absolute;
  bottom: 22px;
  left: 22px;
  z-index: 2;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 16px 20px 15px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 16px 40px -18px rgba(45, 20, 110, 0.35);
  color: var(--lx-grey);
  font-size: 13.5px;
  line-height: 1.3;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.lxd-stat b {
  color: var(--lx-ink);
  font-family: "Matter Medium", sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

@property --lxd-pct {
  syntax: "<integer>";
  inherits: false;
  initial-value: 96;
}

/* Delisting 3: Google's own removal notice */

.lxd-vis--delisting3 {
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(66, 133, 244, 0.18), rgba(66, 133, 244, 0) 70%),
    linear-gradient(180deg, #f6f7f9 0%, #eceef2 100%);
}

.lxd-notice {
  width: min(100%, 480px);
  margin: 0;
}

.lxd-notice__search {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 54px;
  padding: 0 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.16);
  color: #202124;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

.lxd-notice__search svg {
  width: 20px;
  height: 20px;
  margin-left: auto;
  color: #4285f4;
}

.lxd-notice__card {
  margin: 22px 0 0;
  padding: 24px 26px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(32, 33, 36, 0.06), 0 30px 60px -30px rgba(32, 33, 36, 0.35);
}

.lxd-notice__card p {
  margin: 0;
  color: #4d5156;
  font-family: Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

.lxd-notice mark {
  padding: 0 2px;
  background: linear-gradient(transparent 55%, rgba(70, 206, 132, 0.5) 55%) no-repeat 0 0 / 100% 100%;
  color: #202124;
  font-weight: 700;
}

.lxd-notice u {
  color: #1a0dab;
  text-decoration: none;
}

.lxd-notice__cap {
  margin-top: 18px;
  color: var(--lx-grey);
  font-size: 13.5px;
  text-align: center;
}

/* Auto 4: the live LP's face-scan card, the platform bubbles floating around it */

.lxd-vis--auto4 {
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    radial-gradient(40% 36% at 50% 36%, rgba(127, 66, 253, 0.14), rgba(127, 66, 253, 0) 70%),
    radial-gradient(70% 70% at 50% 50%, #fff 0%, #f2f6f3 60%, #e8efea 100%);
}

.lxd-scan {
  position: relative;
  width: min(100%, 510px);
}

.lxd-scan__card {
  display: block;
  width: 100%;
  height: auto;
}

/* Each icon PNG already is a frosted-white bubble with the logo inside, so it fills the spot instead of sitting in one. */
.lxd-scan__bubble {
  position: absolute;
  width: 64px;
  height: 64px;
}

.lxd-scan__bubble img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 18px rgba(7, 16, 12, 0.16));
}

.lxd-scan__bubble--l1 {
  top: 11%;
  left: 2%;
}

.lxd-scan__bubble--l2 {
  top: 29%;
  left: -3%;
}

.lxd-scan__bubble--l3 {
  top: 47%;
  left: 2%;
}

.lxd-scan__bubble--r1 {
  top: 8%;
  right: 2%;
}

.lxd-scan__bubble--r2 {
  top: 26%;
  right: -3%;
}

.lxd-scan__bubble--r3 {
  top: 44%;
  right: 2%;
}

.lxd-vis.is-live .lxd-scan__bubble {
  animation: lxd-float 5s ease-in-out calc(var(--i) * -0.8s) infinite;
}

@keyframes lxd-float {
  50% {
    transform: translateY(-7px);
  }
}

/* D start states, held until the visual comes into view */

.lx-js .lxd-vis:not(.is-live) .lxd-frame,
.lx-js .lxd-vis:not(.is-live) .lxd-tilt__shot,
.lx-js .lxd-vis:not(.is-live) .lxd-lift,
.lx-js .lxd-vis:not(.is-live) .lxd-net__grid li,
.lx-js .lxd-vis:not(.is-live) .lxd-scan__card {
  opacity: 0;
}

.lx-js .lxd-vis:not(.is-live) .lxd-notice mark {
  background-size: 0% 100%;
}

/* D entrances */

.lxd-vis.is-live .lxd-frame {
  animation: lxd-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;
}

.lxd-vis.is-live .lxd-tilt__shot,
.lxd-vis.is-live .lxd-lift,
.lxd-vis.is-live .lxd-scan__card {
  animation: lxd-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.lxd-vis.is-live .lxd-notice mark {
  transition: background-size 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
}

@keyframes lxd-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}

@keyframes lxd-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes lxd-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes lxd-unspin {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes lxd-marquee {
  to {
    transform: translateX(-50%);
  }
}

@keyframes lxd-ticker {
  to {
    transform: translateY(-50%);
  }
}

@keyframes lxd-pulse {
  from {
    box-shadow: 0 0 0 0 rgba(70, 206, 132, 0.55);
  }

  to {
    box-shadow: 0 0 0 10px rgba(70, 206, 132, 0);
  }
}

@keyframes lxd-ping {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }

  60%,
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@keyframes lxd-cursor {
  0% {
    opacity: 0;
    transform: translate(80px, 70px);
  }

  15% {
    opacity: 1;
  }

  45% {
    transform: translate(0, 0);
  }

  52% {
    transform: translate(0, 0) scale(0.84);
  }

  60% {
    transform: translate(0, 0) scale(1);
  }

  82% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(10px, 14px);
  }
}

@media (max-width: 960px) {
  .lxd-row,
  .lxd-row--flip {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .lxd-row--flip .lxd-row__copy {
    order: 0;
  }

  .lxd-vis {
    min-height: 480px;
  }
}

@media (max-width: 560px) {
  .lxd-vis {
    min-height: 420px;
    border-radius: 22px;
  }

  .lxd-vis--delisting1,
  .lxd-vis--delisting2,
  .lxd-vis--delisting3,
  .lxd-vis--auto2,
  .lxd-vis--auto3,
  .lxd-vis--removals3 {
    padding: 28px 16px;
  }

  .lxd-chips li {
    padding: 8px 12px;
    font-size: 13.5px;
  }

  .lxd-orbit__site > span {
    top: -20px;
    left: -20px;
    width: 40px;
    height: 40px;
  }

  .lxd-orbit__site img {
    width: 19px;
    height: 19px;
  }

  .lxd-orbit__core {
    width: 76px;
    height: 76px;
    border-radius: 22px;
  }

  .lxd-orbit__core svg {
    width: 36px;
    height: 36px;
  }

  .lxd-stat {
    bottom: 14px;
    left: 14px;
    padding: 12px 14px;
  }

  .lxd-stat b {
    font-size: 24px;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .lxd-scan__bubble {
    width: 50px;
    height: 50px;
  }

  

  
}

@media (prefers-reduced-motion: reduce) {
  .lxd-vis::before,
  .lxd-vis *,
  .lxd-vis *::before,
  .lxd-vis *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Motion */

@keyframes lx-bar {
  to {
    transform: scaleX(1);
  }
}

@keyframes lxv-grow {
  from {
    transform: scaleX(0.2);
  }
}

@keyframes lxv-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes lxv-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes lxv-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
}

@keyframes lxv-toggle-track {
  from {
    background: #3a3f3c;
  }
}

@keyframes lxv-toggle-knob {
  from {
    transform: translateX(-19px);
  }
}

@keyframes lxv-pulse {
  50% {
    opacity: 0.35;
  }
}

@keyframes lxv-notice {
  0% {
    box-shadow: 0 0 0 0 rgba(127, 66, 253, 0);
  }

  40% {
    box-shadow: 0 0 0 3px rgba(127, 66, 253, 0.28);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(127, 66, 253, 0);
  }
}

/* Lab heroes */

.ui-section-header .ui-c128 {
  transition: opacity 0.25s ease;
}

/* The header sets an inline opacity on this element. */
body:has(.hx) .ui-section-header .ui-c128:not(.lx-fade-on) {
  opacity: 0 !important;
}

/* Nav dropdowns: solid white panels instead of frosted glass (the header's own styles load later, hence the extra class) */
@media (min-width: 810px) {
  .ui-section-header .bs-navdrop__panel {
    border-color: rgba(7, 16, 12, 0.08);
    background: #fff;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .ui-section-header .bs-navdrop__orb {
    display: none;
  }

  .ui-section-header .bs-navdrop__item:hover {
    border-color: transparent;
    background: #f4f6f5;
    box-shadow: none;
  }
}

.hx {
  --hx-ink: #07100c;
  --hx-grey: #5d6460;
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  color: var(--hx-ink);
  font-family: "Matter Regular", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hx *,
.hx *::before,
.hx *::after {
  box-sizing: border-box;
}

.hx-wrap {
  position: relative;
  z-index: 1;
  width: min(1200px, 100% - 48px);
  margin-inline: auto;
}

.hx-wrap--wide {
  width: calc(100% - 28px);
}

.hx-glow {
  position: absolute;
  right: -15%;
  bottom: 0;
  left: -15%;
  z-index: 0;
  height: 64%;
  background:
    radial-gradient(46% 62% at 32% 108%, rgba(15, 181, 163, 0.4), rgba(15, 181, 163, 0) 72%),
    radial-gradient(40% 56% at 72% 110%, rgba(126, 217, 87, 0.42), rgba(126, 217, 87, 0) 72%);
  pointer-events: none;
}

.hx-glow--dark {
  height: 72%;
  background:
    radial-gradient(46% 60% at 30% 108%, color-mix(in srgb, #0fb5a3 62%, transparent), transparent 72%),
    radial-gradient(40% 54% at 70% 110%, color-mix(in srgb, #7ed957 46%, transparent), transparent 72%);
}

/* the photo columns fill the right half on desktop, so the glow stays under the copy */
@media (min-width: 961px) {
  .hx-glow--dark {
    right: 50%;
    left: -10%;
    background:
      radial-gradient(56% 62% at 30% 108%, color-mix(in srgb, #0fb5a3 62%, transparent), transparent 72%),
      radial-gradient(50% 56% at 72% 110%, color-mix(in srgb, #7ed957 46%, transparent), transparent 72%);
    -webkit-mask-image: linear-gradient(to right, #000 75%, transparent);
    mask-image: linear-gradient(to right, #000 75%, transparent);
  }
}

.hx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 5px 14px 5px 5px;
  border: 1px solid rgba(7, 16, 12, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 2px rgba(7, 16, 12, 0.04);
  color: var(--hx-grey);
  font-size: 14px;
  line-height: 1;
}

.hx-eyebrow b {
  color: var(--hx-ink);
  font-family: "Matter Medium", sans-serif;
  font-weight: 500;
}

.hx-faces {
  display: flex;
}

.hx-faces img {
  width: 28px;
  height: 28px;
  margin-left: -9px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
}

.hx-faces img:first-child {
  margin-left: 0;
}

.hx-tick {
  flex: none;
  width: 15px;
  height: 15px;
}

.hx-eyebrow--dark {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.68);
}

.hx-eyebrow--dark b {
  color: #fff;
}

.hx-eyebrow--dark .hx-faces img {
  border-color: #000;
}

.hx-h1 {
  margin: 24px 0 0;
  color: var(--hx-ink);
  font-family: "Matter Medium", sans-serif;
  font-size: clamp(2.6rem, 1.3rem + 4vw, 4.75rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.hx-quiet {
  color: rgba(255, 255, 255, 0.5);
}

.hx-sub {
  max-width: 34em;
  margin: 22px auto 0;
  color: var(--hx-grey);
  font-size: 19px;
  line-height: 1.55;
  text-wrap: pretty;
}

.hx-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.hx-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  border-radius: 999px;
  background: #7f42fd;
  box-shadow: 0 1px 2px rgba(7, 16, 12, 0.1), 0 12px 28px -12px rgba(127, 66, 253, 0.65);
  color: #fff;
  font-family: "Matter Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.hx-btn:hover {
  background: #6d2ff0;
}

.hx-btn svg {
  width: 17px;
  height: 17px;
  transition: transform 0.25s ease;
}

.hx-btn:hover svg {
  transform: translateX(3px);
}

.hx-btn--light {
  background: #fff;
  box-shadow: none;
  color: var(--hx-ink);
}

.hx-btn--light:hover {
  background: #e9eeea;
}

.hx-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 28px;
  margin: 28px 0 0;
  padding: 0;
  color: var(--hx-grey);
  font-size: 14px;
  line-height: 1;
  list-style: none;
}

.hx-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hx-trust img {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

.hx-trust .hx-trust__xbiz {
  width: auto;
  height: 15px;
  border-radius: 0;
}

.hx-stars {
  display: inline-flex;
  gap: 2px;
}

.hx-stars i {
  position: relative;
  width: 16px;
  height: 16px;
  background: #00b67a;
}

.hx-stars i::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: #fff;
  clip-path: polygon(50% 6%, 61.5% 38%, 95% 38%, 68% 58%, 78.5% 91%, 50% 71%, 21.5% 91%, 32% 58%, 5% 38%, 38.5% 38%);
}

.hx-stars .is-half {
  background: linear-gradient(90deg, #00b67a 50%, #dcdce6 50%);
}

.hx-trust--dark {
  color: rgba(255, 255, 255, 0.62);
}

.hx {
  padding-top: 8px;
}

/* The phone header already leaves room under the logo, so the hero tucks up against it; hero 2's black card would lose
   its rounded top corners under the bar, so it stays clear. */
@media (max-width: 809.98px) {
  .hx {
    margin-top: -10px;
    padding-top: 0;
  }

  .hx-2 {
    margin-top: 0;
  }
}

/* Hero 2: black card with moving creators */

.hx-panel {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 100svh - var(--hx-fill, 215px), 1000px);
  overflow: hidden;
  border-radius: 28px;
  background: #000;
  color: #fff;
  isolation: isolate;
}

.hx-panel__inner {
  position: relative;
  z-index: 1;
  width: min(1152px, 100% - 64px);
  margin-inline: auto;
}

.hx-2__copy {
  width: min(560px, 50%);
  padding: clamp(24px, 5vh, 64px) 0;
}

@media (min-width: 961px) {
  .hx-2 .hx-h1 {
    font-size: clamp(2.75rem, min(1.3rem + 4vw, 8.2vh), 4.75rem);
  }
}

.hx-h1--dark {
  color: #fff;
}

.hx-2 .hx-h1,
.hx-2 .hx-sub {
  text-align: left;
}

.hx-sub--dark {
  margin-left: 0;
  color: rgba(255, 255, 255, 0.66);
}

.hx-2 .hx-actions,
.hx-2 .hx-trust {
  justify-content: flex-start;
}

.hx-cols {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(50% + 24px);
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-right: 24px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
  will-change: transform;
}

.hx-col {
  overflow: hidden;
}

.hx-col--3 {
  display: none;
}

@media (min-width: 1700px) {
  .hx-cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hx-col--3 {
    display: block;
  }
}

.hx-col__track {
  display: flex;
  flex-direction: column;
  animation: hx-up 46s linear infinite;
  will-change: transform;
}

.hx-col--1 .hx-col__track {
  animation-name: hx-down;
  animation-duration: 54s;
}

.hx-col--2 .hx-col__track {
  animation-duration: 60s;
}

.hx-tile {
  position: relative;
  flex: none;
  margin: 0 0 14px;
  overflow: hidden;
  border-radius: 18px;
  background: #111;
}

.hx-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 22%;
}

.hx-tile figcaption {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 20px);
  padding: 6px 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-family: "Matter Medium", sans-serif;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.hx-platforms {
  display: flex;
  align-items: center;
  gap: 36px;
  width: min(1152px, 100% - 36px);
  margin: 26px auto 0;
  padding-bottom: 6px;
}

.hx-platforms__label {
  flex: none;
  margin: 0;
  color: var(--hx-grey);
  font-size: 14px;
  white-space: nowrap;
}

.hx-platforms__window {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hx-logos {
  display: flex;
  width: max-content;
}

.hx-logos__set {
  display: flex;
  flex: none;
  align-items: center;
  gap: 56px;
  margin: 0;
  padding: 0 56px 0 0;
  list-style: none;
}

.hx-logos img {
  display: block;
  opacity: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
  .hx-glow {
    animation: hx-drift 10s ease-in-out infinite alternate;
  }

  .hx-logos {
    animation: hx-belt 45s linear infinite;
    will-change: transform;
  }

  .hx:not(.is-live) .hx-glow,
  .hx:not(.is-live) .hx-belt__track,
  .hx:not(.is-live) .hx-col__track,
  .hx:not(.is-live) .hx-logos {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-belt__track,
  .hx-col__track {
    animation: none;
  }
}

@keyframes hx-drift {
  from {
    translate: -5% 0;
  }

  to {
    translate: 5% 0;
  }
}

@keyframes hx-drift-y {
  from {
    translate: 0 -4%;
  }

  to {
    translate: 0 4%;
  }
}

@keyframes hx-belt {
  to {
    transform: translateX(-50%);
  }
}

@keyframes hx-up {
  to {
    transform: translateY(-50%);
  }
}

@keyframes hx-down {
  from {
    transform: translateY(-50%);
  }

  to {
    transform: translateY(0);
  }
}

@media (max-width: 960px) {
  .hx-panel {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .hx-panel__inner {
    width: 100%;
  }

  .hx-2__copy {
    width: auto;
    padding: 44px 28px 36px;
  }

  .hx-cols {
    position: relative;
    inset: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: 420px;
    padding: 0 20px;
  }

  .hx-col--2,
  .hx-col--3 {
    display: none;
  }

  

  

  

  

  
}

@media (max-width: 560px) {
  .hx-wrap {
    width: calc(100% - 32px);
  }

  .hx-wrap--wide {
    width: calc(100% - 16px);
  }

  .hx-sub {
    font-size: 17px;
  }

  .hx-trust {
    gap: 10px 18px;
    font-size: 13px;
  }

  .hx-eyebrow {
    gap: 8px;
    font-size: 13px;
    white-space: nowrap;
  }

  .hx-platforms {
    flex-direction: column;
    gap: 14px;
    margin-top: 22px;
  }

  .hx-platforms__window {
    width: 100%;
  }

  .hx-faces img {
    width: 24px;
    height: 24px;
  }

  

  /* Hero 2: the card's bottom glow (the same two radials) also comes in from the right edge at the top, turned a quarter,
     so it runs down the side, clear of the eyebrow pill. It fades out just under the top edge instead of being cut by it,
     and sways along the edge (sideways drift would pull it off the edge and open a gap). */
  .hx-2 .hx-panel::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    width: 55%;
    height: 420px;
    background:
      radial-gradient(62% 38% at 108% 34%, color-mix(in srgb, #0fb5a3 62%, transparent), transparent 72%),
      radial-gradient(56% 34% at 110% 66%, color-mix(in srgb, #7ed957 46%, transparent), transparent 72%);
    pointer-events: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hx-2 .hx-panel::before {
      animation: hx-drift-y 10s ease-in-out infinite alternate;
    }

    .hx-2:not(.is-live) .hx-panel::before {
      animation-play-state: paused;
    }
  }

  /* Hero 2: XBIZ | Trustpilot on one line, without the Google partner line */
  .hx-2 .hx-trust {
    flex-wrap: nowrap;
    gap: 10px;
    font-size: min(12px, 3.2vw);
    white-space: nowrap;
  }

  .hx-2 .hx-trust li {
    gap: 6px;
  }

  .hx-2 .hx-trust__google {
    display: none;
  }

  .hx-2 .hx-trust__award {
    order: -1;
  }

  .hx-2 .hx-trust__tp {
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.24);
  }

  .hx-2 .hx-stars i {
    width: min(13px, 3.5vw);
    height: min(13px, 3.5vw);
  }

  .hx-2 .hx-trust .hx-trust__xbiz {
    height: min(13px, 3.5vw);
  }

  .hx-panel {
    border-radius: 26px;
  }

  

  

  

  
}

/* Lab: most trusted */

.tx {
  width: 100%;
  color: #07100c;
  font-family: "Matter Regular", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.tx *,
.tx *::before,
.tx *::after {
  box-sizing: border-box;
}

.tx-sec {
  padding-top: clamp(48px, 6vw, 88px);
}

.tx-wrap {
  width: min(1152px, 100% - 48px);
  margin-inline: auto;
}

/* Phones: as wide as hero 2's black card (.hx-wrap--wide) */
@media (max-width: 560px) {
  .tx-wrap {
    width: calc(100% - 16px);
  }
}

.tx-h2 {
  margin: 0;
  color: #07100c;
  font-family: "Matter Medium", sans-serif;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.tx-logo {
  display: block;
  width: auto;
  height: 34px;
  opacity: 0.86;
  filter: brightness(0);
}

.tx-logo--xbiz {
  height: 40px;
  opacity: 1;
  filter: none;
}

.tx-tile--link {
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}

.tx-tile--link:hover,
.tx-tile--link:focus {
  color: inherit;
  text-decoration: none;
}

.tx-tile--link:hover {
  box-shadow: 0 0 0 1px rgba(7, 16, 12, 0.08), 0 14px 30px -18px rgba(7, 16, 12, 0.35);
}

.tx-tile--link:focus-visible {
  outline: 2px solid #7f42fd;
  outline-offset: 2px;
}

/* Desktop only: a quiet corner arrow on the tiles that open something */
.tx-go {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: rgba(7, 16, 12, 0.38);
  transition: background-color 0.2s ease, color 0.2s ease, translate 0.2s ease;
}

.tx-go svg {
  width: 16px;
  height: 16px;
  rotate: -45deg;
}

.tx-tile--link:hover .tx-go {
  background: rgba(7, 16, 12, 0.06);
  color: #07100c;
  translate: 2px -2px;
}

/* 1: logo wall */

.tx-h2 {
  margin: 0 auto clamp(20px, 2.2vw, 32px);
  color: #07100c;
  font-family: "Matter Medium", sans-serif;
  font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-align: center;
  text-wrap: balance;
}

.tx-nw {
  white-space: nowrap;
}

.tx-wall {
  padding: 8px;
  border-radius: 24px;
  background: #eaeeeb;
}

.tx-wall__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* The logo or number centres in the space above; every caption sits on the tile's bottom edge */
.tx-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 160px;
  padding: 24px 18px 20px;
  border-radius: 16px;
  background: #fff;
  text-align: center;
}

.tx-tile > .tx-logo,
.tx-tile > .tx-num {
  margin-block: auto;
}

/* Every caption box is two lines tall with its text at the bottom, so logos and numbers in a row line up */
.tx-tile__meta {
  display: block;
  min-height: 2.8em;
  align-content: end;
  color: #5d6460;
  font-size: 14.5px;
  line-height: 1.4;
  text-wrap: balance;
}

.tx-num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #07100c;
  font-family: "Matter Medium", sans-serif;
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.tx-num img {
  width: 28px;
  height: 28px;
}

.tx-wall__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin: 14px 0 6px;
  color: #5d6460;
  font-size: 14px;
}

.tx-sep {
  width: 1px;
  height: 14px;
  background: rgba(7, 16, 12, 0.18);
}

/* The stars and "Trustpilot" stay together; on phones they get their own line */
.tx-wall__tp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .tx-wall__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tx-tile {
    min-height: 150px;
    padding: 20px 12px 16px;
  }

  .tx-tile__meta {
    font-size: 13.5px;
  }

  .tx-go {
    display: none;
  }

  .tx-sep {
    display: none;
  }

  .tx-wall__tp {
    flex-basis: 100%;
    justify-content: center;
  }

  

  

  

  

  

  

  

  

  

  
}

.sx-h2 {
  margin: 0;
  color: #07100c;
  font-family: "Matter Medium", sans-serif;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.sx-lead {
  max-width: 36em;
  margin: 16px auto 0;
  color: #5d6460;
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}

.sx-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  isolation: isolate;
}

.sx-who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: "Matter Medium", sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.sx-tick {
  flex: none;
  width: 15px;
  height: 15px;
}

/* Media: the photo now, the supplied clip later (it fades in over the photo while it plays) */

.sx-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #0b0d0c;
}

.sx-media img,
.sx-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
}

/* Fan traffic + SEO: the card is the photo */

.sx-fan {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 560px;
  background: #0b0d0c;
  color: #fff;
}

.sx-fan::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.42) 100%);
  pointer-events: none;
}

.sx-fan__panel {
  margin: 14px;
  padding: 18px 20px 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: rgba(10, 12, 11, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
}

.sx-fan__stat {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 12px 0 0;
}

.sx-fan__stat b {
  color: #46ce84;
  font-family: "Matter Medium", sans-serif;
  font-size: 50px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
}

.sx-fan__stat span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
}

/* UrLinks Pro: UrLinks' own dark language, the real phone peeking from the bottom */

.sx-ul {
  display: flex;
  flex-direction: column;
  background: radial-gradient(70% 60% at 82% 108%, rgba(236, 72, 153, 0.32), transparent 70%), radial-gradient(60% 50% at 8% 0%, rgba(127, 66, 253, 0.2), transparent 70%), #0c0b11;
  color: #fff;
}

.sx-ul__copy {
  padding: 32px 32px 0;
}

/* The yearly price struck through, then FREE in the lime of the pricing card's FREE badge */
.sx-price {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: "Matter Medium", sans-serif;
  font-weight: 500;
  line-height: 1;
}

.sx-price s {
  color: rgba(255, 255, 255, 0.5);
  font-size: 22px;
  letter-spacing: -0.02em;
  text-decoration-color: #f472b6;
  text-decoration-thickness: 2px;
}

.sx-price b {
  padding: 8px 13px 7px;
  border-radius: 999px;
  background: #c8ff3e;
  color: #07100c;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.sx-ul__phone {
  position: relative;
  flex: 1;
  min-height: 250px;
  margin-top: 28px;
}

.sx-ul__phone img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 230px;
  height: auto;
  border-radius: 32px 32px 0 0;
  translate: -50% 0;
  filter: drop-shadow(0 24px 48px rgba(236, 72, 153, 0.28));
}

.sx-roll {
  margin: 0;
  color: #07100c;
  font-family: "Matter Medium", sans-serif;
  font-size: clamp(40px, 3.5vw, 50px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.sx-roll__lead {
  display: block;
  color: rgba(7, 16, 12, 0.4);
}

.sx-swap {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
}

.sx-swap__box {
  position: relative;
  display: inline-flex;
  white-space: nowrap;
  clip-path: inset(-0.08em 0);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sx-swap__word {
  display: inline-flex;
}

.sx-swap__probe {
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
}

.sx-swap__line {
  position: absolute;
  right: 0;
  bottom: -0.04em;
  left: 0;
  height: max(3px, 0.06em);
  border-radius: 999px;
  background-image: linear-gradient(90deg, rgba(7, 16, 12, 0.12) 0%, rgba(7, 16, 12, 0.12) 35%, #7f42fd 40%, #9d5cff 45%, #d26ad6 50%, #ff9f7a 55%, #ffc39a 60%, rgba(7, 16, 12, 0.12) 65%, rgba(7, 16, 12, 0.12) 100%);
  background-size: 400% 100%;
  transform-origin: left center;
}

.sx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Human specialists: the real support team's faces */

.sx-support {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 250px;
  padding: 28px;
  border: 1px solid rgba(7, 16, 12, 0.06);
}

.sx-faces {
  display: flex;
  flex: none;
  align-items: center;
}

.sx-faces img,
.sx-faces__more {
  width: 56px;
  height: 56px;
  border: 3px solid #fff;
  border-radius: 50%;
}

.sx-faces img {
  object-fit: cover;
}

.sx-faces > * + * {
  margin-left: -14px;
}

.sx-faces__more {
  display: grid;
  place-items: center;
  background: #eef2ef;
  color: #07100c;
  font-family: "Matter Medium", sans-serif;
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 960px) {
  

  

  .sx-fan {
    min-height: 580px;
  }

  

  

  

  

  

  

  

  
}

@media (max-width: 560px) {
  

  .sx-card {
    border-radius: 24px;
  }

  

  .sx-ul__copy,
  .sx-ul--row .sx-ul__copy {
    padding: 24px 24px 0;
  }

  .sx-fan__stat b {
    font-size: 44px;
  }

  
}

/* below this the labels no longer fit the fan, so the hand opens into a swipe row of slightly tilted cards */

/* Pricing "Included in bundle": black header and a black glass tile with a passing white glint instead of the gold 3D one.
   The shared pricing partial sets these inline, hence !important; this file only loads on the new landing page. */

.lp-bundle-card {
  border-color: #07100c !important;
}

/* Image only: the !important shorthand would also pin background-position and freeze look 7's shimmer. */
.lp-bundle-card > div:first-child {
  background-image: linear-gradient(145deg, #1d211f 0%, #07100c 55%, #000 100%) !important;
}

.lp-bundle-card > span {
  overflow: hidden;
  background: linear-gradient(150deg, #3a3e3c 0%, #121614 46%, #000 100%) !important;
  box-shadow: 0 4px 0 #000, 0 12px 24px -8px rgba(88, 66, 170, 0.55), 0 0 0 4px #fff, inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

.lp-bundle-card > span svg {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.45));
}

.lp-bundle-card > span::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
  translate: -70% 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .lp-bundle-card > span::after {
    animation: lp-bundle-glint 4.8s ease-in-out infinite;
  }
}

@keyframes lp-bundle-glint {
  0%,
  62% {
    translate: -70% 0;
  }

  82%,
  100% {
    translate: 70% 0;
  }
}

/* Look 1's spark tile and header: the features slider's dark app-icon button (the co-creators' chain link) — its cool
   gradient, fine top highlight and hairline edge. The spark keeps its white ring over the header edge; UrLinks' tile
   glows in UrLinks pink from a corner like the slider's UrLinks card. */
.lxb-1 .lp-bundle-card > span {
  background: linear-gradient(160deg, #2c3036 0%, #0e0f12 72%) !important;
  box-shadow: 0 0 0 4px #fff, inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 24px -10px rgba(7, 16, 12, 0.55) !important;
}

.lxb-1 .lp-bundle-card > span svg {
  filter: none;
}

.lxb-1 .lp-bundle-card > div:first-child {
  background-image: linear-gradient(160deg, #2c3036 0%, #0e0f12 72%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.lxb-1 .lp-bundle-card .lp-urlinks-row > span:first-child {
  border-radius: 10px !important;
  background:
    radial-gradient(120% 120% at 100% 100%, rgba(236, 72, 153, 0.8), transparent 62%),
    radial-gradient(90% 90% at 0% 0%, rgba(127, 66, 253, 0.35), transparent 70%),
    linear-gradient(155deg, #26212c 0%, #0c0b11 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 6px 14px -6px rgba(225, 29, 116, 0.55) !important;
}

/* 4: dusk border, monochrome list inside a slowly turning violet-pink edge */
@property --lxb-turn {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* The turning edge's colours; the deep edge (8-10) swaps them for darker ones. */
.lp-bundle-card {
  --lxb-edge: #7f42fd, #ec4899, #ffffff 40%, #c4b5fd 60%, #7f42fd;
}

@keyframes lxb-turn {
  to {
    --lxb-turn: 360deg;
  }
}

@keyframes lxb-pearl {
  to {
    background-position: 300% 0;
  }
}

/* Tools slider: every tool as a same-size card in one rail that slides right, like Fanvue's feature row */

.ft {
  width: 100%;
  padding: clamp(80px, 9vw, 128px) 0 clamp(56px, 8vw, 112px);
  color: #07100c;
  font-family: "Matter Regular", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ft-head {
  display: grid;
  width: min(1152px, 100% - 48px);
  margin-inline: auto;
  text-align: center;
}

.ft-nav {
  display: flex;
  justify-self: end;
  gap: 8px;
  margin-top: 28px;
}

.ft-nav__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(7, 16, 12, 0.12);
  border-radius: 50%;
  background: #fff;
  color: #07100c;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.ft-nav__btn svg {
  width: 18px;
  height: 18px;
}

.ft-nav__btn--prev svg {
  rotate: 180deg;
}

.ft-nav__btn:hover:not(:disabled) {
  background: #07100c;
  color: #fff;
}

.ft-nav__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.ft-nav__btn:focus-visible,
.ft-track:focus-visible {
  outline: 2px solid #7f42fd;
  outline-offset: 3px;
}

/* The rail runs edge to edge; the side padding lines its first card up with the page's 1152px column. */
.ft-track {
  --ft-edge: max(24px, (100% - 1152px) / 2);
  display: flex;
  gap: 14px;
  margin: 20px 0 0;
  padding: 4px var(--ft-edge) 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  list-style: none;
  scroll-padding-inline: var(--ft-edge);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ft-track::-webkit-scrollbar {
  display: none;
}

.ft-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.ft-item {
  display: flex;
  flex: 0 0 clamp(272px, 25vw, 330px);
  height: 470px;
  scroll-snap-align: start;
}

@media (min-width: 961px) {
  .ft-item {
    height: 540px;
  }
}

.ft-item > *,
.ft-box > * {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

/* Stack 7: a title + short description under every card (Fanvue-style), the card in a fixed-height box above it.
   Elsewhere the box is display: contents, so the card stays the item's flex child exactly as before. */
.ft-box {
  display: contents;
}

.ft--cap .ft-item {
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  height: auto;
}

.ft--cap .ft-item > * {
  flex: none;
}

/* Near-square cards (Fanvue's proportions), so each card and its label read together in one view */
.ft--cap .ft-box {
  display: flex;
  height: 340px;
}

@media (min-width: 961px) {
  .ft--cap .ft-box {
    height: 360px;
  }
}

/* What the tall cards needed gives way: Noah's card keeps her photo, name and +19% (her two fact lines go), the
   UrLinks phone shows its top, discovery draws the compact network map */
.ft--cap .sx-fan,
.ft--cap .sxt-tc {
  min-height: 0;
}

.ft--cap .sx-ul__phone {
  min-height: 0;
  margin-top: 20px;
}

.ft-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 6px;
  text-align: center;
}

.ft-cap__new {
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-bottom: 16px;
  padding: 0 9px;
  border-radius: 6px;
  background: #46ce84;
  color: #07100c;
  font-family: "Matter Medium", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
}

.ft-cap__new--empty {
  visibility: hidden;
}

.ft-cap__title {
  max-width: 92%;
  margin: 0;
  color: #07100c;
  font-family: "Matter Medium", sans-serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.ft-cap__desc {
  max-width: 84%;
  margin: 14px 0 0;
  color: #6b716e;
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Support: the faces and the statement as one centred group, faces a size up (shrinking with a narrower card rather
   than widening it) */
.ft--cap .sx-support {
  justify-content: center;
  gap: 26px;
}

.ft--cap .sx-faces img,
.ft--cap .sx-faces__more {
  width: 68px;
  min-width: 0;
  height: auto;
  aspect-ratio: 1;
}

.ft--cap .sx-faces__more {
  font-size: 16px;
}

.ft--cap .ftc--net {
  gap: 4px;
}

.ft--cap .ftc--net .ftc-net {
  margin-top: auto;
}

/* Stack 8–9: the cards are pictures only; the caption under each says what it does. Noah keeps her name and +19% on a
   small glass chip, the pill rows and the network map sit centred, the tool screenshots fill the card straight on. */
.ft--quiet .sx-fan__panel {
  width: fit-content;
  margin: 12px;
  padding: 11px 15px 12px;
  border-radius: 16px;
}

.ft--quiet .sx-fan__stat {
  gap: 8px;
  margin-top: 6px;
}

.ft--quiet .sx-fan__stat b {
  font-size: 32px;
}

.ft--quiet .sx-fan__stat span {
  font-size: 13px;
}

.ft--quiet .ftc--drift,
.ft--quiet .ftc--net {
  justify-content: center;
}

.ft--quiet .ftc--net .ftc-net {
  margin-top: 0;
}

.ft--quiet .sx-faces {
  justify-content: center;
}

/* Support in the picture-only slider, OnlyMonster's black and gold: the faces borderless in a warm light, the "+7" set
   apart as a circle in the dark app-icon button's look (the co-creators' link; px values, --u lives in the tool tiles
   only) */
.ft--quiet .sx-support {
  border: 0;
  background:
    radial-gradient(52% 40% at 50% 50%, rgba(255, 206, 150, 0.24), rgba(255, 196, 140, 0.06) 60%, rgba(255, 196, 140, 0) 100%),
    radial-gradient(90% 55% at 50% 0%, rgba(255, 244, 228, 0.07), rgba(255, 244, 228, 0) 70%),
    #0b0b0d;
}

/* Two team photos are cut-outs on transparent PNGs, made for the white LP */
.ft--quiet .sx-faces img {
  border: 0;
  background: #fff;
}

.ft--quiet .sx-faces__more {
  margin-left: 10px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(160deg, #2c3036 0%, #0e0f12 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 34px -16px rgba(0, 0, 0, 0.75);
  color: #fff;
}

/* Discovery in the picture-only slider: each node's tile is the dark app-icon button (the co-creators' link) with a
   white mark, its ping a white flash */
.ft--quiet .ftc-node__tile {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(160deg, #2c3036 0%, #0e0f12 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 0 0 rgba(255, 255, 255, 0);
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .ft--quiet .ftc-node__tile {
    animation-name: ftc-net-ping-light;
  }
}

@keyframes ftc-net-ping-light {
  0%,
  16%,
  100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 0 0 rgba(255, 255, 255, 0);
  }

  5% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 16px 1px rgba(255, 255, 255, 0.4);
  }
}

/* Tool tiles (?tiles=2, stack 7–9): each tool as a small UI scene built for the card, Fanvue-style. Sizes are design
   pixels of the 330 px desktop card (--u is one), so every scene scales with its card down to phones. --u resolves in
   the tile's children (the tile is their size container), never on the tile itself. */
.ftt {
  --u: calc(100cqi / 330);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(7, 16, 12, 0.06);
  color: #07100c;
  text-decoration: none;
  container-type: inline-size;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.ftt:hover {
  color: #07100c;
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -28px rgba(7, 16, 12, 0.35);
}

a.ftt:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 3px;
}

.ftt-doc__head,
.ftt-doc__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
}

.ftt-doc__head b {
  font-family: "Matter Medium", sans-serif;
  font-size: calc(14.5 * var(--u));
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Model release: the agreement on a lilac wash */
.ftt--release {
  border: 0;
  background:
    radial-gradient(70% 55% at 100% 100%, rgba(240, 149, 248, 0.34), rgba(240, 149, 248, 0) 70%),
    radial-gradient(60% 50% at 0% 0%, rgba(167, 139, 250, 0.26), rgba(167, 139, 250, 0) 70%),
    #0e0b16;
}

.ftt-doc {
  width: calc(252 * var(--u));
  padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u));
  border-radius: calc(16 * var(--u));
  background: #fff;
  box-shadow: 0 0 0 1px rgba(7, 16, 12, 0.05), 0 calc(26 * var(--u)) calc(50 * var(--u)) calc(-26 * var(--u)) rgba(76, 29, 149, 0.4);
  rotate: -3deg;
}

.ftt-seg {
  display: inline-flex;
  padding: calc(3 * var(--u));
  border-radius: 999px;
  background: #f1eef6;
  font-size: calc(10.5 * var(--u));
  line-height: 1;
}

.ftt-seg i {
  padding: calc(5 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  color: #8b8597;
  font-style: normal;
}

.ftt-seg .is-on {
  background: #fff;
  color: #07100c;
  box-shadow: 0 1px 3px rgba(7, 16, 12, 0.14);
}

.ftt-lines {
  display: grid;
  gap: calc(6 * var(--u));
  margin: calc(14 * var(--u)) 0;
}

.ftt-lines i {
  height: calc(6 * var(--u));
  border-radius: 999px;
  background: #efedf4;
}

.ftt-lines i:nth-child(2) {
  width: 88%;
}

.ftt-lines i:nth-child(3) {
  width: 64%;
}

.ftt-sigs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(14 * var(--u));
}

.ftt-sig {
  display: grid;
  gap: calc(5 * var(--u));
}

.ftt-sig svg {
  width: 100%;
  height: calc(34 * var(--u));
  overflow: visible;
  border-bottom: 1px solid #dcd8e5;
  fill: none;
  stroke: #2e1065;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ftt-sig path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.ftt-sig > span {
  color: #8b8597;
  font-size: calc(10.5 * var(--u));
}

.ftt-doc__foot {
  margin-top: calc(14 * var(--u));
}

.ftt-add {
  color: #7f42fd;
  font-family: "Matter Medium", sans-serif;
  font-size: calc(11 * var(--u));
}

.ftt-pdf {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  padding: calc(7 * var(--u)) calc(12 * var(--u));
  border-radius: calc(8 * var(--u));
  color: #fff;
  font-family: "Matter Medium", sans-serif;
  font-size: calc(11.5 * var(--u));
  line-height: 1;
}

.ftt-pdf svg {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}

/* 2257: just the law — the section sign on the dark app-icon button, the number beside it, a green glow from below */
.ftt--records {
  border: 0;
  background:
    radial-gradient(70% 55% at 50% 112%, rgba(70, 206, 132, 0.36), rgba(70, 206, 132, 0) 70%),
    #07100c;
}

.ftt-law {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}

/* The dark app-icon button: 2257's section sign, the social row's platforms, the co-creators' link, piracy intel's
   "Brandit profile" label and the model release's PDF button */
.ftt-law i,
.ftt-plat,
.ftt-knot,
.ftt-brandit__head em,
.ftt-pdf {
  background: linear-gradient(160deg, #2c3036 0%, #0e0f12 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 calc(18 * var(--u)) calc(34 * var(--u)) calc(-16 * var(--u)) rgba(0, 0, 0, 0.75);
}

.ftt-law i {
  display: grid;
  place-items: center;
  width: calc(70 * var(--u));
  height: calc(70 * var(--u));
  border-radius: calc(20 * var(--u));
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(44 * var(--u));
  font-style: normal;
  line-height: 1;
}

.ftt-law b {
  color: #fff;
  font-family: "Matter Medium", sans-serif;
  font-size: calc(80 * var(--u));
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
}

/* Social, OnlyMonster's platform row: the dark buttons step left one slot (76 u) at a time; the one landing in the
   middle slot (133 u) lifts under a warm ring, the hand taps it and it carries a check on. The row's edges fade out. */
.ftt--platforms {
  border: 0;
  background:
    radial-gradient(40% 30% at 50% 40%, rgba(255, 196, 140, 0.16), rgba(255, 196, 140, 0) 70%),
    #0b0b0d;
}

.ftt-plats {
  position: relative;
  width: calc(330 * var(--u));
  height: calc(330 * var(--u));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

.ftt-plats__row {
  position: absolute;
  top: calc(98 * var(--u));
  left: calc(-19 * var(--u));
  display: flex;
  gap: calc(12 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.ftt-plat {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: calc(18 * var(--u));
}

.ftt-plat::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(255, 214, 170, 0.95), 0 0 calc(26 * var(--u)) rgba(255, 190, 130, 0.45);
  opacity: 0;
}

.ftt-plat img {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  object-fit: contain;
}

.ftt-plat img.is-mono {
  filter: invert(1);
}

.ftt-plat__ok {
  position: absolute;
  top: calc(-6 * var(--u));
  right: calc(-6 * var(--u));
  z-index: 1;
  display: grid;
  place-items: center;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border-radius: 50%;
  background: #46ce84;
  box-shadow: 0 0 0 calc(3 * var(--u)) #0b0b0d;
  color: #07100c;
  opacity: 0;
}

.ftt-plat__ok svg {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  stroke-width: 3;
}

.ftt-plats__ripple {
  position: absolute;
  top: calc(98 * var(--u));
  left: calc(133 * var(--u));
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border: calc(2 * var(--u)) solid rgba(255, 214, 170, 0.8);
  border-radius: calc(18 * var(--u));
  opacity: 0;
}

.ftt-plats__hand {
  position: absolute;
  top: calc(168 * var(--u));
  left: calc(145 * var(--u));
  width: calc(46 * var(--u));
  height: calc(57.5 * var(--u));
  filter: drop-shadow(0 calc(10 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.6));
  transform-origin: 44% 0;
}

@media (prefers-reduced-motion: reduce) {
  .ftt-plat:nth-child(3) {
    scale: 1.14;
  }

  .ftt-plat:nth-child(3)::after,
  .ftt-plat:nth-child(3) .ftt-plat__ok {
    opacity: 1;
  }
}

/* Watermark: the tool's kawaii "Luna" on its own transparent background, our DMCA badge under it in the tool's Outline
   style (its outline pill: no fill, a white border, white text and mark) */
.ftt--watermark {
  border: 0;
  background:
    radial-gradient(55% 45% at 50% 42%, rgba(255, 90, 200, 0.3), rgba(255, 90, 200, 0) 70%),
    linear-gradient(170deg, #1a0b1f 0%, #0b060e 100%);
}

.ftt-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ftt-wm {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ftt-wm__art {
  display: block;
  width: calc(248 * var(--u));
  height: auto;
}

.ftt-wm__badge {
  display: inline-flex;
  align-items: center;
  gap: calc(9 * var(--u));
  margin-top: calc(16 * var(--u));
  padding: calc(9 * var(--u)) calc(20 * var(--u)) calc(9 * var(--u)) calc(16 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  color: #fff;
  font-family: "Matter Medium", sans-serif;
  line-height: 1.2;
  white-space: nowrap;
}

.ftt-wm__badge svg {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  fill: currentColor;
}

.ftt-wm__badge > span {
  display: grid;
  gap: calc(1 * var(--u));
}

.ftt-wm__badge b {
  font-size: calc(11.5 * var(--u));
  font-weight: 700;
  letter-spacing: 0.05em;
}

.ftt-wm__badge small {
  color: rgba(255, 255, 255, 0.78);
  font-size: calc(10.5 * var(--u));
  font-weight: 700;
}

/* Brand learning in OnlyMonster's black and gold: the black button with our B mark in a warm light, what it learns
   rolling under it in gold (the doxing card's swap) */
.ftt--brand {
  border: 0;
  background:
    radial-gradient(46% 38% at 50% 36%, rgba(255, 206, 150, 0.26), rgba(255, 196, 140, 0.07) 60%, rgba(255, 196, 140, 0) 100%),
    radial-gradient(90% 55% at 50% 0%, rgba(255, 244, 228, 0.07), rgba(255, 244, 228, 0) 70%),
    #0b0b0d;
}

.ftt-chip {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(118 * var(--u));
  height: calc(118 * var(--u));
  border-radius: calc(30 * var(--u));
  background: linear-gradient(160deg, #34302b 0%, #12110f 70%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 210, 0.22), 0 0 0 1px rgba(255, 214, 170, 0.3), inset 0 calc(-10 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, 0.45), 0 calc(26 * var(--u)) calc(50 * var(--u)) calc(-16 * var(--u)) rgba(0, 0, 0, 0.8);
  color: #f3c98f;
}

.ftt-chip svg {
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  fill: currentColor;
}

.ftt-learn {
  width: calc(300 * var(--u));
  margin-top: calc(30 * var(--u));
  color: #fff;
  font-size: calc(28 * var(--u));
  text-align: center;
}

.ftt-learn .sx-roll__lead {
  color: rgba(255, 255, 255, 0.45);
}

.ftt-learn .sx-swap__word {
  color: #f3c98f;
}

.ftt-learn .sx-swap__line {
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 35%, #b8874f 40%, #e9b97f 45%, #ffe7c2 50%, #e9b97f 55%, #b8874f 60%, rgba(255, 255, 255, 0.14) 65%, rgba(255, 255, 255, 0.14) 100%);
}

/* Scenes laid out in design pixels on the 330 square (co-creators), with an SVG wire layer over it */
.ftt-board {
  position: relative;
  width: calc(330 * var(--u));
  height: calc(330 * var(--u));
}

.ftt-board__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ftt-wire {
  stroke: rgba(127, 66, 253, 0.3);
  stroke-width: 1.5;
}

.ftt-flow {
  stroke: #7f42fd;
  stroke-width: 2;
  stroke-dasharray: 0.16 1;
  stroke-dashoffset: 0.16;
  opacity: 0;
}

/* SERP + SEO, Earnings Hub, Self Submission: the real app screen in the browser frame, set to the card's side and cut by
   its right and bottom edges, like the AI scanning row's frame */
.ftt-frame {
  position: absolute;
  top: calc(40 * var(--u));
  left: calc(36 * var(--u));
  width: calc(560 * var(--u));
  overflow: hidden;
  border-radius: calc(14 * var(--u)) 0 0;
  background: #121118;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 calc(40 * var(--u)) calc(90 * var(--u)) calc(-30 * var(--u)) rgba(24, 4, 70, 0.6);
  transition: translate 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ftt-frame__bar {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  height: calc(28 * var(--u));
  padding: 0 calc(12 * var(--u));
}

.ftt-frame__bar i {
  flex: none;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-radius: 50%;
  background: #ff5f57;
}

.ftt-frame__bar i:nth-child(2) {
  background: #febc2e;
}

.ftt-frame__bar i:nth-child(3) {
  background: #28c840;
}

.ftt-frame__bar span {
  margin-left: calc(10 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  border-radius: calc(6 * var(--u));
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.55);
  font-size: calc(10 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

.ftt-frame__view {
  overflow: hidden;
}

.ftt-frame__shot {
  display: block;
  width: 100%;
  height: auto;
  translate: calc(var(--sx, 0%) * -1) calc(var(--sy, 0%) * -1);
}

.ftt--results {
  border: 0;
  background:
    radial-gradient(70% 55% at 100% 100%, rgba(59, 130, 246, 0.42), rgba(59, 130, 246, 0) 70%),
    #070b16;
}

.ftt--doxing {
  border: 0;
  background:
    radial-gradient(70% 55% at 100% 100%, rgba(244, 63, 94, 0.36), rgba(244, 63, 94, 0) 70%),
    #120709;
}

.ftt--mybrand {
  border: 0;
  background:
    radial-gradient(70% 55% at 100% 100%, rgba(70, 206, 132, 0.34), rgba(70, 206, 132, 0) 70%),
    #07100c;
}

/* Co-creators: two faces on the 330 square, the link line between them with the knot on its midpoint, each name verified */
.ftt--cocreators {
  border: 0;
  background:
    radial-gradient(70% 55% at 100% 100%, rgba(127, 66, 253, 0.42), rgba(127, 66, 253, 0) 70%),
    radial-gradient(60% 50% at 0% 0%, rgba(219, 39, 119, 0.16), rgba(219, 39, 119, 0) 70%),
    #0c0a14;
}

.ftt--cocreators .ftt-wire {
  stroke: rgba(167, 139, 250, 0.6);
  stroke-width: 2.5;
}

.ftt--cocreators .ftt-flow {
  stroke: #ddd6fe;
  stroke-width: 3;
}

.ftt-face {
  position: absolute;
  width: calc(104 * var(--u));
  height: calc(104 * var(--u));
}

.ftt-face--a {
  top: calc(58 * var(--u));
  left: calc(34 * var(--u));
}

.ftt-face--b {
  top: calc(134 * var(--u));
  right: calc(34 * var(--u));
}

.ftt-face__pic {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: #1c1730;
  box-shadow: 0 0 0 calc(3 * var(--u)) rgba(255, 255, 255, 0.92), 0 calc(20 * var(--u)) calc(36 * var(--u)) calc(-14 * var(--u)) rgba(0, 0, 0, 0.7);
}

/* The photo scaled so its crop square fills the circle: --w = photo width, --cx/--cy/--cs = the square in photo pixels */
.ftt-face__pic img {
  position: absolute;
  top: calc((var(--cs) / 2 - var(--cy)) / var(--cs) * 100%);
  left: calc((var(--cs) / 2 - var(--cx)) / var(--cs) * 100%);
  width: calc(var(--w) / var(--cs) * 100%);
  max-width: none;
  height: auto;
}

.ftt-face__name {
  position: absolute;
  top: calc(100% + 14 * var(--u));
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: calc(5 * var(--u)) calc(9 * var(--u)) calc(5 * var(--u)) calc(10 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: #fff;
  font-family: "Matter Medium", sans-serif;
  font-size: calc(11.5 * var(--u));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  translate: -50% 0;
}

.ftt-face__name svg {
  flex: none;
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}

.ftt-knot {
  position: absolute;
  top: calc(128 * var(--u));
  left: calc(145 * var(--u));
  display: grid;
  place-items: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: calc(12 * var(--u));
  color: #fff;
}

.ftt-knot svg {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  stroke-width: 2;
}

/* SERP snapshots: the real snapshot view on black, a faint neutral light behind it */
.ftt--snap {
  border: 0;
  background:
    radial-gradient(60% 45% at 50% 50%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 70%),
    #0b0b0d;
}

.ftt-snapcard {
  width: calc(270 * var(--u));
  overflow: hidden;
  border-radius: calc(14 * var(--u));
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 calc(28 * var(--u)) calc(56 * var(--u)) calc(-26 * var(--u)) rgba(0, 0, 0, 0.8);
}

.ftt--serp {
  border: 0;
  background:
    radial-gradient(45% 50% at 100% 42%, rgba(45, 212, 191, 0.3), rgba(45, 212, 191, 0) 100%),
    linear-gradient(174deg, #06100e 0%, #06100e 35%, #0b2f2a 75%, #0f5c4f 100%);
}

.ftt--earn {
  border: 0;
  background:
    radial-gradient(70% 55% at 100% 100%, rgba(251, 191, 36, 0.32), rgba(251, 191, 36, 0) 70%),
    radial-gradient(60% 50% at 0% 0%, rgba(127, 66, 253, 0.18), rgba(127, 66, 253, 0) 70%),
    #0d0a06;
}

.ftt--selfsub {
  border: 0;
  background:
    radial-gradient(60% 55% at 100% 30%, rgba(240, 149, 248, 0.42), rgba(240, 149, 248, 0) 100%),
    linear-gradient(174deg, #0c0a14 0%, #0c0a14 40%, #2a1747 78%, #4a2a8a 100%);
}

/* Each scene plays when its tile comes into view: the signatures draw, the 2257 mark pops in, the brand chip pops in,
   the co-creators link up (line, knot, second face), the badge pops in under Luna. Reduced motion shows the
   finished scene. */
@media (prefers-reduced-motion: no-preference) {
  .ftt-sig path {
    stroke-dashoffset: 1;
  }

  .ftt.is-live .ftt-sig path {
    animation: ftt-draw 1.4s ease-out 0.3s forwards;
  }

  .ftt.is-live .ftt-sig + .ftt-sig path {
    animation-delay: 1.2s;
  }

  .ftt-law i {
    opacity: 0;
    scale: 0.6;
    rotate: -12deg;
    transition: opacity 0.35s ease, scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), rotate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .ftt-law b {
    opacity: 0;
    translate: calc(-10 * var(--u)) 0;
    transition: opacity 0.45s ease 0.2s, translate 0.45s ease 0.2s;
  }

  .ftt.is-live .ftt-law i,
  .ftt.is-live .ftt-law b {
    opacity: 1;
    scale: 1;
    rotate: none;
    translate: none;
  }

  .ftt-chip,
  .ftt-face,
  .ftt-knot {
    opacity: 0;
    scale: 0.6;
    transition: opacity 0.35s ease, scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .ftt.is-live :is(.ftt-chip, .ftt-face, .ftt-knot) {
    opacity: 1;
    scale: 1;
  }

  .ftt.is-live .ftt-flow {
    opacity: 1;
    animation: ftt-flow 2.4s linear 1s infinite;
  }

  .ftt--cocreators .ftt-wire {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  .ftt--cocreators.is-live .ftt-wire {
    animation: ftt-draw 0.6s ease-out 0.2s forwards;
  }

  .ftt.is-live .ftt-knot {
    transition-delay: 0.45s;
  }

  .ftt.is-live .ftt-face--b {
    transition-delay: 0.7s;
  }

  .ftt-wm__art {
    opacity: 0;
    translate: 0 calc(8 * var(--u));
    transition: opacity 0.45s ease, translate 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .ftt-wm__badge {
    opacity: 0;
    scale: 0.5;
    transition: opacity 0.3s ease 0.5s, scale 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s;
  }

  .ftt.is-live :is(.ftt-wm__art, .ftt-wm__badge) {
    opacity: 1;
    translate: none;
    scale: 1;
  }

  /* The platform row: 8 steps of 2.4 s; each tile's lift, ring and check play on its own step (--k), the hand and the
     ripple on every step. */
  .ftt--platforms.is-live .ftt-plats__row {
    animation: ftt-plats-step 19.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  }

  .ftt--platforms.is-live .ftt-plat {
    animation: ftt-plat-lift 19.2s ease-out calc(var(--k) * 2.4s) infinite;
  }

  .ftt--platforms.is-live .ftt-plat::after {
    animation: ftt-plat-ring 19.2s ease-out calc(var(--k) * 2.4s) infinite;
  }

  .ftt--platforms.is-live .ftt-plat__ok {
    animation: ftt-plat-ok 19.2s ease-out calc(var(--k) * 2.4s) infinite;
  }

  .ftt--platforms.is-live .ftt-plats__hand {
    animation: ftt-plats-tap 2.4s ease-in-out infinite;
  }

  .ftt--platforms.is-live .ftt-plats__ripple {
    animation: ftt-plats-ripple 2.4s ease-out infinite;
  }
}

@keyframes ftt-plats-step {
  0%,
  9.375% {
    translate: 0 0;
  }

  12.5%,
  21.875% {
    translate: calc(-76 * var(--u)) 0;
  }

  25%,
  34.375% {
    translate: calc(-152 * var(--u)) 0;
  }

  37.5%,
  46.875% {
    translate: calc(-228 * var(--u)) 0;
  }

  50%,
  59.375% {
    translate: calc(-304 * var(--u)) 0;
  }

  62.5%,
  71.875% {
    translate: calc(-380 * var(--u)) 0;
  }

  75%,
  84.375% {
    translate: calc(-456 * var(--u)) 0;
  }

  87.5%,
  96.875% {
    translate: calc(-532 * var(--u)) 0;
  }

  100% {
    translate: calc(-608 * var(--u)) 0;
  }
}

@keyframes ftt-plat-lift {
  0% {
    scale: 1;
  }

  2%,
  8.5% {
    scale: 1.14;
  }

  11%,
  100% {
    scale: 1;
  }
}

@keyframes ftt-plat-ring {
  0% {
    opacity: 0;
  }

  2%,
  8.5% {
    opacity: 1;
  }

  11%,
  100% {
    opacity: 0;
  }
}

@keyframes ftt-plat-ok {
  0%,
  3.8% {
    opacity: 0;
    scale: 0.4;
  }

  5.2%,
  14% {
    opacity: 1;
    scale: 1;
  }

  16%,
  100% {
    opacity: 0;
    scale: 0.4;
  }
}

@keyframes ftt-plats-tap {
  0%,
  14% {
    translate: 0 calc(10 * var(--u));
    scale: 1;
  }

  26% {
    translate: 0 0;
    scale: 1;
  }

  31% {
    translate: 0 calc(-3 * var(--u));
    scale: 0.93;
  }

  40% {
    translate: 0 0;
    scale: 1;
  }

  68%,
  100% {
    translate: 0 calc(10 * var(--u));
    scale: 1;
  }
}

@keyframes ftt-plats-ripple {
  0%,
  29% {
    opacity: 0;
    scale: 1;
  }

  32% {
    opacity: 0.9;
    scale: 1.06;
  }

  62%,
  100% {
    opacity: 0;
    scale: 1.42;
  }
}

@keyframes ftt-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ftt-flow {
  from {
    stroke-dashoffset: -1;
  }

  to {
    stroke-dashoffset: 0.16;
  }
}

/* You stay anonymous: just the incognito mark on black, OnlyMonster's night shine behind it (blue glows in two corners,
   a warm haze at the top) — no purple */
.ftt--anon {
  border: 0;
  background:
    radial-gradient(60% 40% at 0% 0%, #12336d 0%, rgba(18, 51, 109, 0.95) 25%, rgba(18, 51, 109, 0) 100%),
    radial-gradient(42% 20% at 46% 0%, rgba(80, 26, 42, 0.95) 0%, rgba(81, 56, 50, 0.7) 50%, rgba(81, 56, 50, 0) 100%),
    radial-gradient(64% 40% at 100% 100%, #0c3166 0%, rgba(12, 49, 102, 0.92) 25%, rgba(12, 49, 102, 0) 100%),
    #0c0c0e;
}

.ftt-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: auto;
  color: #fff;
  fill: currentColor;
  stroke: currentColor;
  filter: drop-shadow(0 0 26px rgba(255, 255, 255, 0.2));
  translate: -50% -50%;
}

/* Every takedown, transparent, dark: a real takedown page in the frame — its timeline and the screenshots proving each
   removal */
.ftt--timeline {
  border: 0;
  background:
    radial-gradient(70% 55% at 0% 100%, rgba(70, 206, 132, 0.26), rgba(70, 206, 132, 0) 70%),
    radial-gradient(60% 45% at 100% 0%, rgba(127, 66, 253, 0.3), rgba(127, 66, 253, 0) 70%),
    #07100c;
}

/* Piracy intel: one Brandit's own profile streaming in word by word, what it allows under it */
.ftt--intel {
  border: 0;
  background:
    radial-gradient(70% 50% at 100% 0%, rgba(70, 206, 132, 0.26), rgba(70, 206, 132, 0) 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(127, 66, 253, 0.28), rgba(127, 66, 253, 0) 70%),
    #07100c;
}

.ftt-brandit {
  width: calc(270 * var(--u));
}

.ftt-brandit__head {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}

.ftt-brandit__head img {
  flex: none;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  border-radius: calc(9 * var(--u));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.ftt-brandit__head span {
  display: grid;
  flex: 1;
  gap: calc(2 * var(--u));
  min-width: 0;
}

.ftt-brandit__head b {
  color: #fff;
  font-family: "Matter Medium", sans-serif;
  font-size: calc(15 * var(--u));
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ftt-brandit__head small {
  color: rgba(255, 255, 255, 0.5);
  font-size: calc(10.5 * var(--u));
}

.ftt-brandit__head em {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: calc(5 * var(--u)) calc(9 * var(--u));
  border-radius: calc(8 * var(--u));
  color: #fff;
  font-family: "Matter Medium", sans-serif;
  font-size: calc(10 * var(--u));
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
}

.ftt-brandit__head em svg {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
}

.ftt-brandit__desc {
  margin: calc(18 * var(--u)) 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: calc(21 * var(--u));
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.ftt-brandit__desc b {
  color: #fff;
  font-family: "Matter Medium", sans-serif;
  font-weight: 500;
}

.ftt-caret {
  display: inline-block;
  width: calc(2.5 * var(--u));
  height: 1.1em;
  margin-left: calc(3 * var(--u));
  background: #46ce84;
  vertical-align: -0.18em;
}

.ftt-brandit__ok {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--u));
  margin-top: calc(16 * var(--u));
}

.ftt-brandit__ok span {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  color: #fff;
  font-family: "Matter Medium", sans-serif;
  font-size: calc(11 * var(--u));
  line-height: 1;
}

.ftt-brandit__ok svg {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  stroke-width: 2.6;
}

/* The new scenes play like the others: the incognito mark floats, the Brandit profile streams in. Reduced motion shows
   them finished. */
@media (prefers-reduced-motion: no-preference) {
  .ftt-ghost {
    animation: ftt-float 6s ease-in-out infinite;
  }

  .ftt--intel .ftt-w,
  .ftt--intel .ftt-caret {
    opacity: 0;
  }

  .ftt--intel.is-live .ftt-w {
    animation: ftt-word 0.3s ease calc(0.3s + var(--i) * 90ms) forwards;
  }

  .ftt--intel.is-live .ftt-caret {
    animation: ftt-blink 1s step-end calc(0.3s + var(--i) * 90ms) infinite;
  }

  .ftt--intel .ftt-brandit__ok span {
    opacity: 0;
    translate: 0 calc(6 * var(--u));
    transition: opacity 0.4s ease, translate 0.4s ease;
  }

  .ftt--intel.is-live .ftt-brandit__ok span {
    opacity: 1;
    translate: none;
    transition-delay: 1.7s;
  }

  .ftt--intel.is-live .ftt-brandit__ok span + span {
    transition-delay: 1.85s;
  }
}

@keyframes ftt-word {
  from {
    opacity: 0;
    filter: blur(4px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes ftt-blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes ftt-float {
  50% {
    translate: -50% calc(-50% - 6px);
  }
}

@media (hover: none) {
  .ft-nav {
    display: none;
  }
}

/* Stack 11: one rail from 761 px up; on phones the same cards in two rails, each swiped on its own */
.ft-rows {
  display: none;
}

/* Block, not grid: a grid column would grow to the rails' min-content (ten cards wide) and push the page sideways */
@media (max-width: 760px) {
  .ft--one .ft-track--all,
  .ft--one .ft-nav {
    display: none;
  }

  .ft-rows {
    display: block;
  }

  .ft-row + .ft-row {
    margin-top: 12px;
  }
}

@media (max-width: 560px) {
  .ft-track {
    gap: 10px;
  }

  .ft-item {
    flex-basis: 80%;
    height: 440px;
  }

  .ft--cap .ft-item {
    gap: 20px;
  }

  .ft-cap__new {
    margin-bottom: 14px;
  }

  .ft-cap__title {
    font-size: 22px;
  }

  .ft-cap__desc {
    margin-top: 12px;
    font-size: 15.5px;
  }
}

/* Slider cards: social media removals (?social= 1 logo grid, 2 removed post, 3 dark logo arc) and content discovery
   (?discovery= 1 radar, 2 dashboard screenshot, 3 within the hour) */

.ftc {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px;
  border: 1px solid rgba(7, 16, 12, 0.06);
}

/* Discovery 3: "under an hour" as the big number on our dark green */
.ftc--hour {
  border: 0;
  background:
    radial-gradient(70% 50% at 100% 0%, rgba(70, 206, 132, 0.35), rgba(70, 206, 132, 0) 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(127, 66, 253, 0.25), rgba(127, 66, 253, 0) 70%),
    #07100c;
  color: #fff;
}

@keyframes ftc-blip {
  0%,
  100% {
    opacity: 0.4;
    scale: 0.9;
  }

  8% {
    opacity: 1;
    scale: 1.08;
  }

  40% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes ftc-bob {
  50% {
    translate: 0 -6px;
  }
}

@media (max-width: 560px) {
  .ftc {
    padding: 24px;
  }

  
}

@keyframes ftc-pull {
  0%,
  20%,
  100% {
    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.6), 0 0 0 0 rgba(70, 206, 132, 0);
  }

  6% {
    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(70, 206, 132, 0.6);
  }
}

/* Discovery 5-6: the same platforms as an Aikido-style integration map (staggered 2/1/2/1 rows), each node wired to a BranditScan tile.
   The map runs to the card edges; node sizes are cqi of that width so they scale with the wires' viewBox. */
.ftc--net {
  gap: 16px;
}

.ftc-net {
  --net-rgb: 70, 206, 132;
  --net-tile: #0c1c13;
  --net-mark: #c9f5dc;
  container-type: inline-size;
  margin: 0 -28px;
}

/* One 330 × 236 design space for the map, its wires and the nodes' --x / --y / --w (discovery/_net) */
.ftc-net__map {
  position: relative;
  aspect-ratio: 330 / 236;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.ftc-net__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ftc-net__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
}

.ftc-net__glow,
.ftc-net__beam {
  stroke: rgb(var(--net-rgb));
  stroke-linecap: round;
  stroke-dasharray: var(--dash) 200;
  stroke-dashoffset: var(--dash);
  opacity: 0;
}

.ftc-net__glow {
  stroke-width: 5;
}

.ftc-net__beam {
  stroke-width: 1.5;
}

.ftc-net__nodes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ftc-node {
  position: absolute;
  top: calc(var(--y) / 236 * 100%);
  left: calc(var(--x) / 330 * 100%);
  display: flex;
  align-items: center;
  gap: 3cqi;
  box-sizing: border-box;
  width: calc(var(--w) / 330 * 100%);
  height: calc(40 / 236 * 100%);
  padding-left: 3.86cqi;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 2.14cqi;
  background: #0a140f;
  color: rgba(255, 255, 255, 0.9);
  font-size: 5.2cqi;
  line-height: 1;
  white-space: nowrap;
}

.ftc-node img {
  flex: none;
  width: 6.86cqi;
  height: 6.86cqi;
  object-fit: contain;
}

.ftc-node--light img {
  filter: invert(1);
}

.ftc-node span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ftc-node__tile {
  display: grid;
  flex: none;
  place-items: center;
  box-sizing: border-box;
  height: calc(100% + 2px);
  aspect-ratio: 1;
  margin: -1px -1px -1px auto;
  border: 1px solid rgba(var(--net-rgb), 0.7);
  border-radius: inherit;
  background: var(--net-tile);
  color: var(--net-mark);
  box-shadow: 0 0 0 1px rgba(var(--net-rgb), 0.12), 0 0 12px -2px rgba(var(--net-rgb), 0.45);
}

.ftc-node__tile svg {
  width: 46%;
  height: 46%;
  fill: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .ftc-net__glow {
    opacity: 0.3;
    animation: ftc-net-beam var(--dur) linear var(--start) infinite;
  }

  .ftc-net__beam {
    opacity: 1;
    animation: ftc-net-beam var(--dur) linear var(--start) infinite;
  }

  .ftc-node__tile {
    animation: ftc-net-ping var(--p) ease-out var(--d) infinite;
  }
}

@keyframes ftc-net-beam {
  to {
    stroke-dashoffset: -100;
  }
}

@keyframes ftc-net-ping {
  0%,
  16%,
  100% {
    box-shadow: 0 0 0 1px rgba(var(--net-rgb), 0.12), 0 0 12px -2px rgba(var(--net-rgb), 0.45);
  }

  5% {
    box-shadow: 0 0 0 1px rgba(var(--net-rgb), 0.35), 0 0 18px 1px rgba(var(--net-rgb), 0.85);
  }
}

@media (max-width: 560px) {
  .ftc--net {
    gap: 10px;
  }

  

  .ftc-net {
    margin: 0 -24px;
  }
}

@keyframes ftc-wave {
  50% {
    translate: 0 -14px;
  }
}

/* Pill looks 17-19: the bundle box's dusk edge on every chip; 19 turns it, one animated angle on the card shared by all chips */
@property --ftc-turn {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@keyframes ftc-turn {
  to {
    --ftc-turn: 360deg;
  }
}

@keyframes ftc-drift-left {
  to {
    transform: translateX(-50%);
  }
}

@keyframes ftc-drift-right {
  from {
    transform: translateX(-50%);
  }
}

@keyframes ftc-conveyor {
  from {
    transform: translateX(-50%);
  }
}

@property --fx-n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@keyframes fx-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes fx-wire {
  to {
    background-position: 12px 0;
  }
}

@keyframes fx-radar {
  from {
    opacity: 0.9;
    scale: 1;
  }

  to {
    opacity: 0;
    scale: 2.9;
  }
}

@keyframes fx-bob {
  from {
    translate: 0 -5px;
  }

  to {
    translate: 0 5px;
  }
}

@keyframes st-zoom {
  from {
    scale: 1.02;
  }

  to {
    scale: 1.1;
  }
}

/* 12-14: the Fan Traffic & Revenue Tool on light, the real screenshot in a device frame inside an Aikido-style gradient glow */

.fxg {
  width: 100%;
  padding: clamp(48px, 6vw, 88px) 0;
  color: #07100c;
  font-family: "Matter Regular", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.fxg *,
.fxg *::before,
.fxg *::after {
  box-sizing: border-box;
}

.fxg__wrap {
  width: min(1152px, 100% - 48px);
  margin-inline: auto;
}

.fxg--center .fxg__head {
  max-width: 820px;
  margin: 0 auto clamp(32px, 4vw, 52px);
  text-align: center;
}

/* Same size as the other section titles (.lx-h2, "See it in action"). */
.fxg__h {
  margin: 18px 0 0;
  font-family: "Matter Medium", sans-serif;
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.fxg__text {
  max-width: 34em;
  margin: 16px 0 0;
  color: #5d6460;
  font-size: 18px;
  line-height: 1.55;
  text-wrap: pretty;
}

.fxg--center .fxg__text {
  margin-inline: auto;
}

.fxg__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 26px;
}

.fxg--center .fxg__row {
  justify-content: center;
}

.fxg__btn,
.fxg__btn:hover {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  background: #07100c;
  color: #fff;
  font-family: "Matter Medium", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: translate 0.2s ease;
}

.fxg__btn:hover {
  translate: 0 -1px;
}

.fxg__btn svg {
  width: 16px;
  height: 16px;
}

.fxg__btn:focus-visible,
.fxc__link:focus-visible {
  outline: 2px solid #7f42fd;
  outline-offset: 3px;
}

@keyframes fxc-turn {
  0% {
    opacity: 0;
    translate: 0 8px;
    visibility: hidden;
  }

  4%,
  30% {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
  }

  34%,
  100% {
    opacity: 0;
    translate: 0 -8px;
    visibility: hidden;
  }
}

@media (max-width: 860px) {
  

  

  

  

  .fxg__text {
    font-size: 16.5px;
  }
}

.fxm-snap__view {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1032 / 590;
  container-type: inline-size;
}

.fxm-snap__view--still .fxm-snap__page {
  transform: translateY(calc(var(--at, 0) * -1cqi));
}

.fxm-snap__page {
  position: relative;
}

.fxm-snap__page > img {
  display: block;
  width: 100%;
  height: auto;
}

.fxm-snap__spot {
  position: absolute;
  border-radius: 1.2cqi;
  pointer-events: none;
}

.fxm-snap__spot::before {
  content: "";
  position: absolute;
  inset: -0.6cqi;
  border-radius: 1.6cqi;
}

.fxm-snap__tag {
  position: absolute;
  top: -1.5cqi;
  left: -0.8cqi;
  display: inline-flex;
  align-items: center;
  gap: 0.8cqi;
  padding: 0.6cqi 1.4cqi 0.6cqi 0.6cqi;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 1cqi 2.4cqi -0.8cqi rgba(37, 99, 235, 0.75);
  color: #fff;
  font-family: "Matter Medium", sans-serif;
  font-size: max(8.5px, 1.9cqi);
  font-weight: 500;
  white-space: nowrap;
}

.fxm-snap__tag img {
  box-sizing: border-box;
  width: max(12px, 2.6cqi);
  height: max(12px, 2.6cqi);
  padding: max(1.5px, 0.3cqi);
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}

/* Phones: the window is too small to carry the callout too; the legend strip already says "15 her pages" */

@keyframes fxm-pan {
  0%,
  16% {
    transform: none;
  }

  44%,
  72% {
    transform: translateY(-56cqi);
  }

  94%,
  100% {
    transform: none;
  }
}

@keyframes fxm-spot {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5);
  }

  70%,
  100% {
    box-shadow: 0 0 0 2.2cqi rgba(37, 99, 235, 0);
  }
}

@keyframes fxm-tag {
  from {
    opacity: 0;
    transform: translateY(0.8cqi) scale(0.9);
  }
}

@keyframes fxw-pick {
  0%,
  22% {
    background-color: rgba(37, 99, 235, 0.08);
    box-shadow: inset 3px 0 0 #2563eb;
  }

  30%,
  100% {
    background-color: rgba(37, 99, 235, 0);
    box-shadow: inset 0 0 0 rgba(37, 99, 235, 0);
  }
}

@keyframes fxw-spot {
  0%,
  22% {
    box-shadow: 0 0 0 0.5cqi rgba(37, 99, 235, 0.6), 0 0 3cqi 0.6cqi rgba(37, 99, 235, 0.35);
  }

  30%,
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0), 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

@keyframes fxw-grow {
  from {
    width: 0;
  }
}

@keyframes fxr-roll {
  0% {
    opacity: 0;
    transform: translateY(45%);
  }

  2.5%,
  18% {
    opacity: 1;
    transform: none;
  }

  20.5%,
  100% {
    opacity: 0;
    transform: translateY(-45%);
  }
}

@keyframes fxr-swap {
  0% {
    opacity: 0;
    transform: scale(0.97);
  }

  3%,
  18% {
    opacity: 1;
    transform: none;
  }

  21%,
  100% {
    opacity: 0;
    transform: scale(1.015);
  }
}

@keyframes fxr-type {
  0% {
    max-width: 0;
  }

  4%,
  17.5% {
    max-width: 9ch;
  }

  19.5%,
  100% {
    max-width: 0;
  }
}

@keyframes fxr-follow {
  0%,
  4.5% {
    opacity: 0;
    transform: translateY(0.8cqi);
  }

  6.5%,
  17.5% {
    opacity: 1;
    transform: none;
  }

  19.5%,
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes fxr-blink {
  50% {
    opacity: 0;
  }
}

@keyframes fxm-fill {
  from {
    width: var(--from);
  }
}

@keyframes fxm-leak {
  0%,
  40% {
    opacity: 1;
    transform: none;
  }

  50%,
  88% {
    opacity: 0;
    transform: translateY(-0.8cqi);
  }

  96%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fxm-strike {
  0%,
  22% {
    text-decoration-color: transparent;
  }

  32%,
  88% {
    text-decoration-color: #d64545;
  }

  92%,
  100% {
    text-decoration-color: transparent;
  }
}

@keyframes fxm-page {
  0%,
  44% {
    opacity: 0;
    transform: translateY(0.8cqi);
    background-color: rgba(70, 206, 132, 0);
  }

  54% {
    opacity: 1;
    transform: none;
    background-color: rgba(70, 206, 132, 0.16);
  }

  72%,
  88% {
    opacity: 1;
    transform: none;
    background-color: rgba(70, 206, 132, 0);
  }

  94%,
  100% {
    opacity: 0;
    transform: translateY(0.8cqi);
    background-color: rgba(70, 206, 132, 0);
  }
}

@keyframes fxm-then {
  0%,
  46% {
    opacity: 1;
  }

  54%,
  88% {
    opacity: 0;
  }

  96%,
  100% {
    opacity: 1;
  }
}

@keyframes fxm-now {
  0%,
  46% {
    opacity: 0;
  }

  54%,
  88% {
    opacity: 1;
  }

  96%,
  100% {
    opacity: 0;
  }
}

@keyframes fxm-draw {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fxm-fade {
  from {
    opacity: 0;
  }
}

@keyframes fxm-pop {
  from {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes fxm-walk {
  0%,
  28% {
    box-shadow: 0 0 0 max(2px, 0.4cqi) rgba(70, 206, 132, 0.5), 0 2cqi 4cqi -2cqi rgba(28, 138, 82, 0.45);
    transform: translateY(-0.6cqi);
  }

  36%,
  100% {
    box-shadow: 0 0 0 0 rgba(70, 206, 132, 0), 0 0 0 0 rgba(28, 138, 82, 0);
    transform: none;
  }
}

@keyframes fxp-in {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
}

@keyframes fxa-ring {
  0% {
    z-index: 0;
    box-shadow: 0 0 0 3px #fff;
    translate: 0 0;
  }

  4%,
  30% {
    z-index: 2;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #46ce84;
    translate: 0 -3px;
  }

  34%,
  100% {
    z-index: 0;
    box-shadow: 0 0 0 3px #fff;
    translate: 0 0;
  }
}

@keyframes fx-march {
  to {
    stroke-dashoffset: -24.01;
  }
}

@keyframes fx-caret {
  50% {
    opacity: 0;
  }
}

/* Responsive */

@media (max-width: 560px) {
  .lx-wrap {
    width: calc(100% - 32px);
  }

  .lx-lead,
  .lx-text {
    font-size: 16px;
  }

  

  

  

  

  

  

  

  

  

  

  
}

@keyframes lxs-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

[aria-selected="true"] > .lxs-bar i,
.lxs-item.is-on .lxs-bar i {
  animation: lxs-fill 8s linear forwards;
}

@keyframes lxs-fill {
  to {
    transform: none;
  }
}

@keyframes lxs-fade {
  from {
    opacity: 0;
  }
}

/* See it in action L: D's rows, compact like aikido.dev. Rows closer together, shorter visuals, a 50/50 split, and on
   phones the chips run on one swipeable line instead of wrapping into three. */

.lxd--tight .lx-head {
  margin-bottom: clamp(48px, 5.5vw, 80px);
}

.lxd--tight .lxd-row,
.lxd--tight .lxd-row--flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5.5vw, 84px);
}

.lxd--tight .lxd-row + .lxd-row {
  margin-top: clamp(64px, 7vw, 100px);
}

.lxd--tight .lxd-h3 {
  margin-top: 18px;
  font-size: clamp(1.75rem, 1.2rem + 1.1vw, 2.375rem);
}

.lxd--tight .lxd-text {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.6;
}

.lxd--tight .lxd-chips {
  margin-top: 26px;
}

.lxd--tight .lx-link {
  margin-top: 28px;
}

.lxd--tight .lxd-vis {
  min-height: 440px;
}

/* The orbit scales down whole for the shorter visual (shrinking only the rings ran the inner logos into the B),
   and the face-scan card sits a little lower */
.lxd--tight .lxd-orbit {
  scale: 0.84;
}

/* A smaller B and slightly wider inner rings keep the logos clear of its corners at laptop and phone widths */
.lxd--tight .lxd-orbit__ring--1 {
  --r: max(17cqi, 80px);
}

.lxd--tight .lxd-orbit__ring--2 {
  --r: max(30cqi, 128px);
}

.lxd--tight .lxd-orbit__core {
  width: 76px;
  height: 76px;
  border-radius: 22px;
}

.lxd--tight .lxd-orbit__core svg {
  width: 36px;
  height: 36px;
}

.lxd--tight .lxd-scan {
  width: min(100%, 400px);
  translate: 0 12px;
}

@media (max-width: 960px) {
  .lxd--tight .lxd-row,
  .lxd--tight .lxd-row--flip {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .lxd--tight .lxd-row + .lxd-row {
    margin-top: 96px;
  }

  .lxd--tight .lxd-vis {
    min-height: 380px;
  }
}

@media (max-width: 560px) {
  .lxd--tight .lxd-h3 {
    margin-top: 20px;
    font-size: 28px;
  }

  .lxd--tight .lxd-text {
    margin-top: 16px;
  }

  

  .lxd--tight .lxd-chips {
    margin-top: 28px;
  }

  .lxd--tight .lx-link {
    margin-top: 30px;
  }

  .lxd--tight .lxd-chips {
    flex-wrap: nowrap;
    max-width: none;
    margin-right: -24px;
    padding-right: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }

  .lxd--tight .lxd-chips::-webkit-scrollbar {
    display: none;
  }

  .lxd--tight .lxd-chips li {
    flex: none;
  }

  .lxd--tight .lxd-vis {
    min-height: 320px;
  }

  .lxd--tight .lxd-vis--delisting3 {
    padding: 20px 16px;
  }

  .lxd--tight .lxd-notice__cap {
    display: none;
  }

  .lxd--tight .lxd-notice__card {
    margin-top: 14px;
    padding: 16px 18px;
  }

  .lxd--tight .lxd-notice__card p {
    font-size: 13.5px;
  }

  .lxd--tight .lxd-scan {
    width: min(100%, 290px);
    translate: 0 8px;
  }

  .lxd--tight .lxd-orbit {
    scale: 0.8;
  }
}

@keyframes lxp-fill {
  to {
    transform: none;
  }
}

/* Phones: the bento becomes a swipe row of equal tiles; stories and the checklist keep one fixed-height stage */

/* Fan traffic 34–36: proof first. The +22% average revenue lift leads, the case studies (three creators and Vixen Media
   Group) take turns, and the tool itself is the supporting picture. 34 = number beside a case card, 35 = number over a board
   of case tiles, 36 = the same on a dark card with one rolling case line. */

@property --fxq-n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@keyframes fxq-run {
  to {
    stroke-dashoffset: 0;
    transform: none;
  }
}

.fxq-face {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* Fan traffic 37–39: the case studies as video stories. 37 = Aikido-style (media, quote, numbers, names switch the story),
   38 = the creators' own review reels beside the +22%, 39 = 37 on a dark card with the media in a phone frame. */

.fxq-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 12px 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(7, 16, 12, 0.08);
  color: #5d6460;
  font-size: 14.5px;
  line-height: 1;
}

.fxq-chip b {
  color: #46ce84;
  font-family: "Matter Medium", sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.fxv-story {
  text-align: left;
}

.fxv-panes {
  display: grid;
}

.fxv-pane {
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(32px, 5.5vw, 80px);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.fxv-pane.is-on {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.45s ease;
}

.fxv-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  background: #e9ecea;
}

.fxv-photo,
.fxv-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.fxv-video {
  background: #000;
}

.is-playing > .fxv-video {
  object-fit: contain;
}

.fxv-yt {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.fxv-play {
  position: absolute;
  bottom: 18px;
  left: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 6px 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 12px 30px -12px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  color: #fff;
  font-family: "Matter Medium", sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  translate: -50% 0;
  transition: background-color 0.2s ease, translate 0.2s ease;
}

.fxv-play:hover {
  background: rgba(255, 255, 255, 0.32);
  translate: -50% -1px;
}

.fxv-play__dot {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #46ce84;
  color: #07100c;
  box-shadow: 0 0 0 4px rgba(70, 206, 132, 0.25);
}

.fxv-play svg {
  width: 14px;
  height: 14px;
}

.fxv-play:focus-visible,
.fxv-tab:focus-visible,
.fxv-read:focus-visible {
  outline: 2px solid #7f42fd;
  outline-offset: 3px;
}

.fxv-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 4px 0;
}

.fxv-read,
.fxv-read:hover {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #5d6460;
  font-size: 14px;
  text-decoration: none;
}

.fxv-read__go {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(7, 16, 12, 0.06);
  transition: background-color 0.2s ease;
}

.fxv-read__go svg {
  width: 12px;
  height: 12px;
  rotate: -45deg;
}

.fxv-read:hover .fxv-read__go {
  background: rgba(7, 16, 12, 0.12);
}

.fxv-mark {
  height: 34px;
  margin-top: 28px;
  color: #46ce84;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 72px;
  line-height: 1;
}

.fxv-quote {
  margin: 10px 0 0;
  color: #07100c;
  font-family: "Matter Medium", sans-serif;
  font-size: clamp(20px, 0.9rem + 0.7vw, 26px);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.022em;
  text-wrap: pretty;
}

.fxv-quote--statement {
  margin-top: 22px;
  font-size: clamp(24px, 1rem + 1.3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.fxv-by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0 0;
}

.fxv-by .fxq-face {
  width: 36px;
  height: 36px;
}

.fxv-by__who {
  display: grid;
  gap: 3px;
  color: #98a09b;
  font-size: 13.5px;
  line-height: 1.2;
}

.fxv-by__who b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #07100c;
  font-family: "Matter Medium", sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.fxv-by__tick {
  flex: none;
  width: 14px;
  height: 14px;
}

/* The two numbers that sell it, big and in BranditScan green, then the leaks count as a quieter line */
.fxv-proof {
  width: 100%;
  margin-top: auto;
  padding-top: 44px;
}

.fxv-proof__big {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.fxv-proof__big div {
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
}

.fxv-proof__big div + div {
  padding-left: clamp(18px, 2.4vw, 32px);
  border-left: 1px solid rgba(7, 16, 12, 0.1);
}

.fxv-proof__big dd {
  margin: 0;
  background: linear-gradient(180deg, #5ad993 0%, #46ce84 45%, #34b873 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Matter Medium", sans-serif;
  font-size: clamp(42px, 1.6rem + 2.6vw, 66px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.fxv-proof__big dt {
  color: #5d6460;
  font-size: 14px;
  line-height: 1.3;
}

.fxv-proof__more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(7, 16, 12, 0.08);
  color: #5d6460;
  font-size: 14px;
}

.fxv-proof__more svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: #46ce84;
}

.fxv-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(40px, 5vw, 64px);
}

.fxv-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 64px;
  padding: 0 14px;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: #eef1ef;
  color: #5d6460;
  font-family: "Matter Medium", sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* The open story's tab gets a green line along its bottom edge */
.fxv-tab::after {
  content: "";
  position: absolute;
  right: 22%;
  bottom: 0;
  left: 22%;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #46ce84;
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fxv-tab.is-on::after {
  transform: none;
}

.fxv-tab__lift {
  color: #46ce84;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.fxv-tab:hover {
  color: #07100c;
}

.fxv-tab.is-on {
  background: #fff;
  color: #07100c;
  box-shadow: inset 0 0 0 1px rgba(7, 16, 12, 0.08), 0 14px 30px -20px rgba(7, 16, 12, 0.35);
}

.fxv-tab .fxq-face {
  width: 30px;
  height: 30px;
}

.fxv-tab__vid {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #07100c;
  color: #fff;
}

.fxv-tab__vid svg {
  width: 9px;
  height: 9px;
}

.fxv-play[hidden] {
  display: none;
}

@media (max-width: 860px) {
  .fxv-pane,
  .fxv-dark .fxv-pane {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 30px;
  }

  

  

  

  
}

@media (max-width: 560px) {
  .fxv-media {
    aspect-ratio: 4 / 3.4;
  }

  .fxv-mark {
    height: 26px;
    margin-top: 22px;
    font-size: 58px;
  }

  .fxv-quote {
    font-size: 19px;
  }

  .fxv-by {
    margin-top: 24px;
  }

  .fxv-proof {
    padding-top: 34px;
  }

  .fxv-proof__more {
    margin-top: 22px;
  }

  .fxv-proof__big dd {
    font-size: 40px;
  }

  .fxv-proof__big dt {
    font-size: 13px;
  }

  .fxv-tab__lift {
    display: none;
  }

  /* Phones: the three names side by side, each tab its face over its name (the story's Watch video stays the play cue). */
  .fxv-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .fxv-tab {
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    padding: 10px 6px 12px;
    font-size: 13px;
  }

  .fxv-tab .fxq-face {
    width: 26px;
    height: 26px;
  }

  .fxv-tab__vid {
    display: none;
  }

  

  

  
}

/* 37, compact: a narrower 5:4 video beside a wider copy column, tighter gaps between head, case and tabs. */
.fxv--light .fxg__head {
  margin-bottom: clamp(28px, 3vw, 40px);
}

.fxv--light .fxv-pane {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4.5vw, 64px);
}

/* Full column width: when the copy is the taller side, the row stretches the video's height, and the ratio alone would then widen it past its column. */
.fxv--light .fxv-media {
  width: 100%;
  aspect-ratio: 5 / 4;
}

.fxv--light .fxv-mark {
  height: 28px;
  margin-top: 18px;
  font-size: 64px;
}

.fxv--light .fxv-quote {
  font-size: clamp(19px, 0.85rem + 0.6vw, 23px);
}

.fxv--light .fxv-by {
  margin-top: 22px;
}

.fxv--light .fxv-proof {
  padding-top: 28px;
}

.fxv--light .fxv-proof__big dd {
  font-size: clamp(40px, 1.5rem + 2.2vw, 58px);
}

.fxv--light .fxv-proof__more {
  margin-top: 18px;
  padding-top: 14px;
}

.fxv--light .fxv-tabs {
  margin-top: clamp(28px, 3.2vw, 44px);
}

.fxv--light .fxv-tab {
  min-height: 56px;
}

@media (max-width: 860px) {
  .fxv--light .fxv-pane {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 560px) {
  .fxv--light .fxv-media {
    aspect-ratio: 16 / 11;
  }

  .fxv--light .fxv-mark {
    height: 24px;
    margin-top: 14px;
    font-size: 54px;
  }

  .fxv--light .fxv-quote {
    font-size: 18px;
  }

  .fxv--light .fxv-by {
    margin-top: 18px;
  }

  .fxv--light .fxv-proof {
    padding-top: 24px;
  }

  .fxv--light .fxv-proof__more {
    margin-top: 16px;
    padding-top: 12px;
  }

  .fxv--light .fxv-tab {
    min-height: 48px;
  }
}

/* "Creators rocking our merch" (?merch=): real creators in BranditScan merch drifting past, right above the fan traffic block.
   1 = one line with a green 12,000+ over the strip, 2 = a big green 12,000+ beside a strip that runs off the screen's edge,
   3 = 1's line over tilted polaroids. */

.lxm {
  --lxm-card: 196px;
  --lxm-gap: 14px;
  width: 100%;
  padding: clamp(40px, 5vw, 72px) 0 clamp(16px, 2vw, 24px);
  color: #07100c;
  font-family: "Matter Regular", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.lxm *,
.lxm *::before,
.lxm *::after {
  box-sizing: border-box;
}

.lxm__h {
  width: min(900px, 100% - 48px);
  margin: 0 auto clamp(28px, 3.4vw, 44px);
  font-family: "Matter Medium", sans-serif;
  font-size: clamp(28px, 1.1rem + 1.7vw, 44px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.035em;
  text-align: center;
  text-wrap: balance;
}

.lxm__num,
.lxm-stat__num {
  background: linear-gradient(180deg, #5ad993 0%, #46ce84 45%, #34b873 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lxm-strip {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.lxm-track {
  display: flex;
  width: max-content;
  animation: lxm-drift 120s linear infinite;
}

.lxm-set {
  display: flex;
  gap: var(--lxm-gap);
  margin: 0;
  padding: 0 var(--lxm-gap) 0 0;
  list-style: none;
}

.lxm-card {
  position: relative;
  flex: none;
  width: var(--lxm-card);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 20px;
  background: #e4e9e6;
}

.lxm-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(7, 16, 12, 0.06);
  pointer-events: none;
}

.lxm-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lxm-card__name {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 20px);
  padding: 5px 8px 5px 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px -6px rgba(7, 16, 12, 0.35);
  color: #07100c;
  font-family: "Matter Medium", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.lxm-card__name > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lxm-card__tick {
  flex: none;
  width: 14px;
  height: 14px;
}

@keyframes lxm-drift {
  to {
    transform: translateX(-50%);
  }
}

/* Fan traffic under the strip: its heading sits as far below the strip as the strip's headline sits below the last
   See it in action row (.lxd bottom + .lxm top padding), counting the strip's own bottom padding. */
.lxm + .lx-anchor + .fxg {
  padding-top: calc(clamp(72px, 8vw, 120px) + clamp(40px, 5vw, 72px) - clamp(16px, 2vw, 24px));
}

.lxm + .lx-anchor + .fxg .fxg__head > .fxg__h:first-child {
  margin-top: 0;
}

@media (hover: hover) {
  .lxm-strip:hover .lxm-track {
    animation-play-state: paused;
  }

  
}

@media (max-width: 560px) {
  .lxm {
    --lxm-card: 132px;
    --lxm-gap: 10px;
  }

  

  .lxm-track {
    animation-duration: 80s;
  }

  .lxm-card {
    border-radius: 14px;
  }

  .lxm-card__name {
    bottom: 8px;
    left: 8px;
    gap: 3px;
    max-width: calc(100% - 16px);
    padding: 4px 6px 4px 8px;
    font-size: 11px;
  }

  .lxm-card__tick {
    width: 12px;
    height: 12px;
  }

  

  
}

@media (prefers-reduced-motion: reduce) {
  .lxm-strip {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lxm-strip::-webkit-scrollbar {
    display: none;
  }

  .lxm-track {
    animation: none;
  }

  .lxm-set[aria-hidden] {
    display: none;
  }
}

/* Wide stages: the Google notice and the UrLinks price grow with the room around them */

/* Scan 4 and fan traffic: the whole screen in the browser frame, inset on every side and cut at the bottom */
.lxd-vis--scan4 {
  background: var(--lx-scan-bg);
}

/* Full width, centred; a screen taller than the box is cut at the bottom, so all four corners always show */
.lxd-frame--whole {
  --lxd-inset: clamp(18px, 3.2cqi, 36px);
  inset: 50% var(--lxd-inset) auto;
  display: flex;
  flex-direction: column;
  width: auto;
  max-height: calc(100% - var(--lxd-inset) * 2);
  padding: 0 6px 6px;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 70px -30px rgba(52, 30, 160, 0.5);
  translate: 0 -50%;
}

.lxd-frame--whole .lxd-frame__bar {
  flex: none;
  height: 36px;
  padding: 0 10px;
}

.lxd-frame__view {
  min-height: 0;
  overflow: hidden;
  border-radius: 0 0 10px 10px;
}

/* Narrow boxes: the frame blown up, running off the right and bottom, so the numbers stay legible */
@container (max-width: 560px) {
  .lxd-frame--whole {
    inset: 24px auto auto 20px;
    display: block;
    width: 720px;
    max-height: none;
    padding: 0;
    border-radius: 14px 0 0;
    translate: none;
  }

  .lxd-frame__view {
    border-radius: 0;
  }
}

/* O split (default): the steps in a white list on the left, the stage on the right. Below 961px the stage comes first
   and the dock overlaps its bottom edge, as in the edge layout. */

/* Below the full-width container the tab row and the dock become swipe rows reaching the screen edges */

/* O: below 800px the four labelled steps sit in a 2 × 2 dock, so every label stays visible without a swipe */

/* Narrow screens keep the three columns instead of the swipe row, and phones stack them */

/* See it in action R: OnlyMonster-style feature chips, grey tiles with smaller grey text and a quiet monochrome icon */
.lxd-chips--grey li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px 7px 9px;
  border: 0;
  background: #eceeed;
  color: #4e5551;
  font-size: 13px;
}

.lxd-chips--grey li svg,
.lxd-chips--grey li img {
  flex: none;
  width: 14px;
  height: 14px;
}

.lxd-chips--grey li svg {
  color: #6f7672;
}

.lxd-chips--grey li img {
  border-radius: 3px;
  filter: grayscale(1);
  opacity: 0.7;
}

/* Phones: the rows' chips as two separate lines that swipe together, each chip at its natural width (a shared grid
   stretched short chips to the one above them) */
.lxd-chips2 {
  display: none;
}

@media (max-width: 560px) {
  .lxd--tight .lxd-chips--one {
    display: none;
  }

  .lxd--tight .lxd-chips2 {
    display: grid;
    justify-content: start;
    gap: 8px;
    margin: 28px -16px 0 0;
    padding-right: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }

  .lxd--tight .lxd-chips2::-webkit-scrollbar {
    display: none;
  }

  .lxd--tight .lxd-chips2 .lxd-chips {
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* The snapshot plays here as in the fan traffic block, whose own rules key off .fxf.is-live */
@media (prefers-reduced-motion: no-preference) {
  

  .lxf-live.is-live .fxm-snap__spot::before {
    animation: fxm-spot 2.6s ease-out calc(1.6s + var(--i) * 0.45s) infinite;
  }

  .lxf-live.is-live .fxm-snap__tag {
    animation: fxm-tag 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) calc(1s + var(--i) * 0.15s) both;
  }
}

/* Fan search 8: the 11 tools section between the delisting and automation rows, spaced like the rows */
.lxd .ft {
  padding-block: clamp(88px, 9vw, 136px);
}

@keyframes lxt-up {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(calc(-50% - 7px));
  }
}

@keyframes lxt-down {
  from {
    transform: translateY(calc(-50% - 7px));
  }

  to {
    transform: translateY(0);
  }
}