/* Scribbify Phase 4: product proof bento and light-to-violet handoff */
html body.home.sc-body.sbx4-page {
  --p4-dark: #0C0C11;
  --p4-surface: #12131B;
  --p4-elevated: #191A24;
  --p4-border: #2A2935;
  --p4-ink: #F4F3FA;
  --p4-muted: #AAA7B5;
  --p4-dim: #73707E;
  --p4-violet: #6547F5;
  --p4-deep: #3A236A;
  --p4-bridge: #9A91FF;
  --p4-plum: #21172F;
  --p4-light: #F5F3F7;
  --p4-light-surface: #FAF9FB;
  --p4-light-ink: #17131D;
  --p4-light-muted: #66616D;
  --p4-light-border: #DDD9E5;
}

html body.home.sc-body.sbx4-page main#brx-content > section#work {
  position: relative !important;
  isolation: isolate !important;
  min-height: auto !important;
  margin-top: -2px !important;
  overflow: hidden !important;
  padding: 106px 24px 146px !important;
  border: 0 !important;
  background-color: var(--p4-light) !important;
  background-image:
    radial-gradient(ellipse 54% 22% at 12% 52%, rgba(154,145,255,.12), rgba(154,145,255,0) 74%),
    radial-gradient(ellipse 62% 24% at 88% 78%, rgba(101,71,245,.1), rgba(101,71,245,0) 72%),
    linear-gradient(180deg, #F5F3F7 0%, #F5F3F7 78%, rgba(154,145,255,.16) 88%, rgba(154,145,255,.38) 96%, rgba(154,145,255,.56) 100%) !important;
}

html body.home.sc-body.sbx4-page main#brx-content > section#work::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  opacity: .48 !important;
  background-image:
    linear-gradient(rgba(58,35,106,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,35,106,.035) 1px, transparent 1px) !important;
  background-size: 82px 82px !important;
  mask-image: linear-gradient(180deg, transparent, #0C0C11 20%, #0C0C11 74%, transparent) !important;
  -webkit-mask-image: linear-gradient(180deg, transparent, #0C0C11 20%, #0C0C11 74%, transparent) !important;
  pointer-events: none !important;
}

html body.home.sc-body.sbx4-page main#brx-content > section#work::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  right: -16vw !important;
  bottom: -170px !important;
  width: 72vw !important;
  height: 400px !important;
  border-radius: 50% !important;
  background: rgba(101,71,245,.18) !important;
  filter: blur(100px) !important;
  pointer-events: none !important;
}

html body.home.sc-body.sbx4-page #work > .sc-wrap {
  position: relative !important;
  z-index: 2 !important;
  width: min(1180px, calc(100% - 32px)) !important;
  max-width: 1180px !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

html body.home.sc-body.sbx4-page #work .sc-head {
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(320px, .7fr) !important;
  gap: 72px !important;
  width: 100% !important;
  margin: 0 0 64px !important;
  padding: 0 !important;
  align-items: end !important;
  border: 0 !important;
  text-align: left !important;
}

html body.home.sc-body.sbx4-page #work .sc-head > div {
  width: auto !important;
  max-width: 720px !important;
  margin: 0 !important;
}

html body.home.sc-body.sbx4-page #work .sc-label {
  margin: 0 0 18px !important;
  color: var(--p4-violet) !important;
  -webkit-text-fill-color: var(--p4-violet) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

html body.home.sc-body.sbx4-page #work .sc-h2 {
  max-width: 690px !important;
  margin: 0 !important;
  color: var(--p4-light-ink) !important;
  -webkit-text-fill-color: var(--p4-light-ink) !important;
  font-size: clamp(42px, 4.7vw, 62px) !important;
  font-weight: 500 !important;
  line-height: 1.01 !important;
  letter-spacing: -.057em !important;
  text-align: left !important;
  text-wrap: balance !important;
}

html body.home.sc-body.sbx4-page #work .sc-h2 i {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-style: normal !important;
}

html body.home.sc-body.sbx4-page #work .sc-head > p {
  max-width: 470px !important;
  margin: 0 0 3px !important;
  color: var(--p4-light-muted) !important;
  -webkit-text-fill-color: var(--p4-light-muted) !important;
  font-size: 14px !important;
  line-height: 1.68 !important;
  text-align: left !important;
}

html body.home.sc-body.sbx4-page #work .sc-head > p a {
  color: var(--p4-light-ink) !important;
  -webkit-text-fill-color: var(--p4-light-ink) !important;
  text-decoration-color: rgba(101,71,245,.48) !important;
  text-underline-offset: 4px !important;
}

html body.home.sc-body.sbx4-page #work .cap-products {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.home.sc-body.sbx4-page #work .cap-product {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 440px !important;
  margin: 0 !important;
  inset: auto !important;
  overflow: hidden !important;
  padding: 28px !important;
  align-items: stretch !important;
  border-radius: 18px !important;
  transform: none !important;
  opacity: 1 !important;
}

html body.home.sc-body.sbx4-page #work .cap-product--primary {
  grid-template-columns: minmax(300px, .74fr) minmax(0, 1.26fr) !important;
  gap: 42px !important;
  border: 1px solid rgba(154,145,255,.22) !important;
  background-color: var(--p4-plum) !important;
  background-image:
    radial-gradient(circle at 78% 18%, rgba(154,145,255,.22), rgba(154,145,255,0) 34%),
    linear-gradient(135deg, #21172F 0%, #12131B 72%, #0C0C11 100%) !important;
  box-shadow: inset 0 1px 0 rgba(244,243,250,.045), 0 34px 90px rgba(58,35,106,.16) !important;
}

html body.home.sc-body.sbx4-page #work .cap-product--reverse {
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr) !important;
  gap: 42px !important;
  border: 1px solid rgba(58,35,106,.1) !important;
  background-color: var(--p4-light-surface) !important;
  background-image:
    radial-gradient(circle at 12% 16%, rgba(154,145,255,.12), rgba(154,145,255,0) 36%),
    linear-gradient(145deg, rgba(250,249,251,.98), rgba(245,243,247,.9)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 26px 72px rgba(58,35,106,.08) !important;
}

html body.home.sc-body.sbx4-page #work .cap-product__copy {
  display: flex !important;
  min-width: 0 !important;
  padding: 14px 8px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  flex-direction: column !important;
}

html body.home.sc-body.sbx4-page #work .cap-product__meta,
html body.home.sc-body.sbx4-page #work .cap-product-tile .cap-product__meta {
  display: flex !important;
  width: 100% !important;
  margin: 0 0 24px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  color: var(--p4-light-muted) !important;
  -webkit-text-fill-color: var(--p4-light-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

html body.home.sc-body.sbx4-page #work .cap-product--primary .cap-product__meta {
  color: rgba(244,243,250,.52) !important;
  -webkit-text-fill-color: rgba(244,243,250,.52) !important;
}

html body.home.sc-body.sbx4-page #work .cap-product__meta a {
  display: inline-flex !important;
  min-height: 32px !important;
  padding: 8px 13px !important;
  align-items: center !important;
  border: 1px solid rgba(58,35,106,.12) !important;
  border-radius: 999px !important;
  background: rgba(250,249,251,.78) !important;
  color: var(--p4-light-ink) !important;
  -webkit-text-fill-color: var(--p4-light-ink) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: .05em !important;
  text-decoration: none !important;
  transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease !important;
}

html body.home.sc-body.sbx4-page #work .cap-product--primary .cap-product__meta a,
html body.home.sc-body.sbx4-page #work .cap-media-slot--dark + .cap-product-tile__copy .cap-product__meta a {
  border-color: rgba(244,243,250,.13) !important;
  background: rgba(244,243,250,.07) !important;
  color: var(--p4-ink) !important;
  -webkit-text-fill-color: var(--p4-ink) !important;
}

html body.home.sc-body.sbx4-page #work .cap-product__meta a:hover {
  border-color: rgba(101,71,245,.32) !important;
  transform: translateY(-2px) !important;
}

html body.home.sc-body.sbx4-page #work .cap-product__copy > h3 {
  max-width: 430px !important;
  margin: 0 !important;
  color: var(--p4-light-ink) !important;
  -webkit-text-fill-color: var(--p4-light-ink) !important;
  font-size: clamp(32px, 3.1vw, 44px) !important;
  font-weight: 500 !important;
  line-height: 1.03 !important;
  letter-spacing: -.052em !important;
  text-wrap: balance !important;
}

html body.home.sc-body.sbx4-page #work .cap-product--primary .cap-product__copy > h3 {
  color: var(--p4-ink) !important;
  -webkit-text-fill-color: var(--p4-ink) !important;
}

html body.home.sc-body.sbx4-page #work .cap-product__copy > p {
  max-width: 480px !important;
  margin: 20px 0 0 !important;
  color: var(--p4-light-muted) !important;
  -webkit-text-fill-color: var(--p4-light-muted) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

html body.home.sc-body.sbx4-page #work .cap-product--primary .cap-product__copy > p {
  color: rgba(244,243,250,.6) !important;
  -webkit-text-fill-color: rgba(244,243,250,.6) !important;
}

html body.home.sc-body.sbx4-page #work .cap-media-slot {
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 330px !important;
  margin: 0 !important;
  inset: auto !important;
  overflow: hidden !important;
  padding: 28px !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  border-radius: 14px !important;
  transform: none !important;
}

html body.home.sc-body.sbx4-page #work .cap-media-slot::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(101,71,245,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101,71,245,.08) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
  mask-image: linear-gradient(135deg, #0C0C11, rgba(12,12,17,.28)) !important;
  -webkit-mask-image: linear-gradient(135deg, #0C0C11, rgba(12,12,17,.28)) !important;
  pointer-events: none !important;
}

html body.home.sc-body.sbx4-page #work .cap-media-slot::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  top: 18% !important;
  right: 11% !important;
  width: 46% !important;
  height: 44% !important;
  border: 1px solid rgba(154,145,255,.28) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 18% 26%, var(--p4-violet) 0 4px, rgba(101,71,245,.14) 5px 13px, transparent 14px),
    linear-gradient(90deg, transparent 0 12%, rgba(101,71,245,.22) 12% 12.5%, transparent 12.5%),
    rgba(250,249,251,.06) !important;
  box-shadow: -56px 60px 0 -34px rgba(154,145,255,.1), 0 24px 54px rgba(58,35,106,.12) !important;
  transform: rotate(-2deg) !important;
  pointer-events: none !important;
}

html body.home.sc-body.sbx4-page #work .cap-media-slot--dark {
  border: 1px solid rgba(154,145,255,.18) !important;
  background-color: var(--p4-dark) !important;
  background-image:
    radial-gradient(circle at 78% 22%, rgba(101,71,245,.3), rgba(101,71,245,0) 34%),
    linear-gradient(145deg, #191A24, #0C0C11) !important;
  box-shadow: inset 0 1px 0 rgba(244,243,250,.035) !important;
}

html body.home.sc-body.sbx4-page #work .cap-media-slot--light {
  border: 1px solid rgba(58,35,106,.1) !important;
  background-color: #F5F3F7 !important;
  background-image:
    radial-gradient(circle at 78% 24%, rgba(154,145,255,.22), rgba(154,145,255,0) 35%),
    linear-gradient(145deg, #FAF9FB, #F5F3F7) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
}

html body.home.sc-body.sbx4-page #work .cap-media-slot--violet {
  border: 1px solid rgba(244,243,250,.16) !important;
  background-color: var(--p4-deep) !important;
  background-image:
    radial-gradient(circle at 76% 20%, rgba(244,243,250,.18), rgba(244,243,250,0) 32%),
    linear-gradient(145deg, #6547F5, #3A236A) !important;
  box-shadow: inset 0 1px 0 rgba(244,243,250,.1) !important;
}

html body.home.sc-body.sbx4-page #work .cap-media-slot__mark {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: flex-start !important;
  flex-direction: column !important;
}

html body.home.sc-body.sbx4-page #work .cap-media-slot__mark small,
html body.home.sc-body.sbx4-page #work .cap-media-slot__note {
  color: var(--p4-light-muted) !important;
  -webkit-text-fill-color: var(--p4-light-muted) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

html body.home.sc-body.sbx4-page #work .cap-media-slot__mark strong {
  margin-top: 6px !important;
  color: var(--p4-light-ink) !important;
  -webkit-text-fill-color: var(--p4-light-ink) !important;
  font-size: clamp(22px, 2.3vw, 32px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

html body.home.sc-body.sbx4-page #work .cap-media-slot--dark .cap-media-slot__mark small,
html body.home.sc-body.sbx4-page #work .cap-media-slot--dark .cap-media-slot__note,
html body.home.sc-body.sbx4-page #work .cap-media-slot--violet .cap-media-slot__mark small,
html body.home.sc-body.sbx4-page #work .cap-media-slot--violet .cap-media-slot__note {
  color: rgba(244,243,250,.52) !important;
  -webkit-text-fill-color: rgba(244,243,250,.52) !important;
}

html body.home.sc-body.sbx4-page #work .cap-media-slot--dark .cap-media-slot__mark strong,
html body.home.sc-body.sbx4-page #work .cap-media-slot--violet .cap-media-slot__mark strong {
  color: var(--p4-ink) !important;
  -webkit-text-fill-color: var(--p4-ink) !important;
}

html body.home.sc-body.sbx4-page #work .cap-product-mosaic {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 20px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.home.sc-body.sbx4-page #work .cap-product-tile {
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  grid-column: span 5 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 520px !important;
  margin: 0 !important;
  inset: auto !important;
  overflow: hidden !important;
  padding: 18px !important;
  align-items: stretch !important;
  flex-direction: column !important;
  border: 1px solid rgba(58,35,106,.1) !important;
  border-radius: 18px !important;
  background-color: var(--p4-light-surface) !important;
  background-image:
    radial-gradient(circle at 90% 8%, rgba(154,145,255,.1), rgba(154,145,255,0) 28%),
    linear-gradient(145deg, rgba(250,249,251,.98), rgba(245,243,247,.92)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74), 0 22px 64px rgba(58,35,106,.07) !important;
  transform: none !important;
  opacity: 1 !important;
  transition: transform 260ms cubic-bezier(.22,1,.36,1), border-color 260ms ease, box-shadow 260ms ease !important;
}

html body.home.sc-body.sbx4-page #work .cap-product-tile--wide {
  grid-column: span 7 !important;
}

html body.home.sc-body.sbx4-page #work .cap-product-tile:hover {
  border-color: rgba(101,71,245,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 30px 74px rgba(58,35,106,.11) !important;
  transform: translateY(-4px) !important;
}

html body.home.sc-body.sbx4-page #work .cap-product-tile__copy {
  display: flex !important;
  min-height: 0 !important;
  padding: 20px 14px 12px !important;
  justify-content: flex-start !important;
  flex-direction: column !important;
}

html body.home.sc-body.sbx4-page #work .cap-product-tile__copy > h3 {
  max-width: 620px !important;
  margin: 0 !important;
  color: var(--p4-light-ink) !important;
  -webkit-text-fill-color: var(--p4-light-ink) !important;
  font-size: clamp(24px, 2.2vw, 32px) !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance !important;
}

html body.home.sc-body.sbx4-page #work .cap-product-tile__copy > p {
  max-width: 580px !important;
  margin: 14px 0 0 !important;
  color: var(--p4-light-muted) !important;
  -webkit-text-fill-color: var(--p4-light-muted) !important;
  font-size: 12px !important;
  line-height: 1.62 !important;
}

html body.home.sc-body.sbx4-page #work .cap-product-tile .cap-media-slot {
  min-height: 230px !important;
  height: 230px !important;
  flex: 0 0 230px !important;
  padding: 22px !important;
}

html body.home.sc-body.sbx4-page #work .cap-track {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr) !important;
  gap: 54px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 20px 0 0 !important;
  padding: 34px 36px !important;
  align-items: center !important;
  border: 1px solid rgba(58,35,106,.1) !important;
  border-radius: 18px !important;
  background: rgba(250,249,251,.58) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.56) !important;
  transform: none !important;
  opacity: 1 !important;
}

html body.home.sc-body.sbx4-page #work .cap-track::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 34.5% !important;
  width: 1px !important;
  height: 42px !important;
  background: linear-gradient(180deg, transparent, rgba(101,71,245,.32), transparent) !important;
  transform: translateY(-50%) !important;
}

html body.home.sc-body.sbx4-page #work .cap-track > strong {
  color: var(--p4-light-ink) !important;
  -webkit-text-fill-color: var(--p4-light-ink) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: -.025em !important;
}

html body.home.sc-body.sbx4-page #work .cap-track > p {
  margin: 0 !important;
  color: var(--p4-light-muted) !important;
  -webkit-text-fill-color: var(--p4-light-muted) !important;
  font-size: 12px !important;
  line-height: 1.62 !important;
}

html body.home.sc-body.sbx4-page main#brx-content > section#brxe-scdf01 {
  margin-top: -2px !important;
  border: 0 !important;
  background-color: var(--p4-light) !important;
  background-image:
    radial-gradient(ellipse 62% 28% at 72% 0%, rgba(101,71,245,.18), rgba(101,71,245,0) 70%),
    linear-gradient(180deg, rgba(154,145,255,.56) 0%, rgba(154,145,255,.28) 14%, #F5F3F7 34%, #F5F3F7 100%) !important;
}

@media (max-width: 900px) {
  html body.home.sc-body.sbx4-page #work .sc-head {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  html body.home.sc-body.sbx4-page #work .sc-head > p {
    max-width: 620px !important;
  }

  html body.home.sc-body.sbx4-page #work .cap-product--primary,
  html body.home.sc-body.sbx4-page #work .cap-product--reverse {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  html body.home.sc-body.sbx4-page #work .cap-product--primary .cap-media-slot {
    min-height: 360px !important;
  }

  html body.home.sc-body.sbx4-page #work .cap-product-tile,
  html body.home.sc-body.sbx4-page #work .cap-product-tile--wide {
    grid-column: span 6 !important;
  }

  html body.home.sc-body.sbx4-page #work .cap-track {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  html body.home.sc-body.sbx4-page #work .cap-track::before {
    display: none !important;
  }
}

@media (max-width: 767px) {
  html body.home.sc-body.sbx4-page main#brx-content > section#work {
    padding: 92px 18px 112px !important;
  }

  html body.home.sc-body.sbx4-page #work > .sc-wrap {
    width: 100% !important;
  }

  html body.home.sc-body.sbx4-page #work .sc-head {
    margin-bottom: 44px !important;
  }

  html body.home.sc-body.sbx4-page #work .sc-h2 {
    font-size: clamp(38px, 11vw, 50px) !important;
  }

  html body.home.sc-body.sbx4-page #work .cap-product {
    min-height: 0 !important;
    padding: 18px !important;
  }

  html body.home.sc-body.sbx4-page #work .cap-product__copy {
    padding: 12px 6px !important;
  }

  html body.home.sc-body.sbx4-page #work .cap-product__copy > h3 {
    font-size: clamp(30px, 9vw, 40px) !important;
  }

  html body.home.sc-body.sbx4-page #work .cap-product__meta,
  html body.home.sc-body.sbx4-page #work .cap-product-tile .cap-product__meta {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  html body.home.sc-body.sbx4-page #work .cap-media-slot,
  html body.home.sc-body.sbx4-page #work .cap-product--primary .cap-media-slot {
    min-height: 280px !important;
    height: 280px !important;
  }

  html body.home.sc-body.sbx4-page #work .cap-product-mosaic {
    grid-template-columns: 1fr !important;
  }

  html body.home.sc-body.sbx4-page #work .cap-product-tile,
  html body.home.sc-body.sbx4-page #work .cap-product-tile--wide {
    grid-column: 1 !important;
    min-height: 0 !important;
  }

  html body.home.sc-body.sbx4-page #work .cap-product-tile .cap-media-slot {
    min-height: 220px !important;
    height: 220px !important;
    flex-basis: 220px !important;
  }

  html body.home.sc-body.sbx4-page #work .cap-track {
    padding: 28px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.home.sc-body.sbx4-page #work .cap-product__meta a,
  html body.home.sc-body.sbx4-page #work .cap-product-tile {
    transition: none !important;
  }
}