/* RM motion: the eight type treatments, played by scrolling */
.rm-motion { background: var(--ri); }
.rm-motion .rm-note { color: #a3a39e; }
.rm-tm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.rm-tmc { --acc: #2f45ff; --on: #eef0ff; background: var(--rp); color: var(--ri); border-radius: 12px; padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 14px; min-height: clamp(240px, 24vw, 300px); min-width: 0; overflow: hidden; position: relative; }
.rm-tmc.blue { background: var(--acc); color: var(--on); }
.rm-tmc .top { display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--rf); letter-spacing: .06em; text-transform: uppercase; color: var(--rmute); }
.rm-tmc.blue .top { color: var(--on); opacity: .8; }
.rm-tmc .top i { flex: 1; height: 1px; background: var(--rline); position: relative; overflow: hidden; }
.rm-tmc.blue .top i { background: rgba(238,240,255,.3); }
.rm-tmc .top i::after { content: ""; position: absolute; inset: 0; background: currentColor; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.rm-tmc .stage { flex: 1; display: flex; align-items: center; min-width: 0; }
.rm-tmc .d { margin: 0; font-size: 13px; line-height: 1.45; color: var(--rmute); }
.rm-tmc.blue .d { color: var(--on); opacity: .85; }
.rm-tmc h4 { margin: 0; font-family: var(--rf); }
.rm-tmc .mega { font-weight: 830; text-transform: uppercase; letter-spacing: -.064em; line-height: .84; }
.rm-tmc .big { font-weight: 780; letter-spacing: -.058em; line-height: .92; }

.tm1 .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.tm1 .ln > span { display: block; will-change: transform; }
.tm2 { white-space: nowrap; will-change: letter-spacing, filter; }
.tm3 { font-weight: 300; letter-spacing: -.05em; white-space: nowrap; }
.tm3 span { display: inline-block; }
.tm4 { position: relative; display: inline-block; white-space: nowrap; color: #cdcdc9; --r: 44px; --x: -20%; }
.tm4 .ink { position: absolute; inset: 0; color: #2737dc; clip-path: circle(var(--r) at var(--x) 50%); }
.tm4 .ring { position: absolute; top: 50%; left: var(--x); width: calc(var(--r) * 2); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 42%), radial-gradient(circle, rgba(47,69,255,0) 62%, rgba(47,69,255,.1) 100%); box-shadow: inset 0 0 0 1px rgba(47,69,255,.18), 0 18px 40px rgba(17,17,17,.1); }
.tm5 { color: var(--acc); }
.tm5 .slot { display: inline-block; height: 1.2em; line-height: 1.2; overflow: hidden; vertical-align: bottom; }
.tm5 .slot > span { display: block; will-change: transform; }
.tm5 .slot > span > span { display: block; height: 1.2em; white-space: nowrap; }
.tm6 { display: flex; gap: .3em; color: var(--acc); font-variant-numeric: tabular-nums; line-height: 1; }
.tm6 .n { display: inline-flex; }
.tm6 .dg { display: inline-block; height: 1em; overflow: hidden; letter-spacing: 0; padding-inline: .03em; margin-inline: -.045em; }
.tm6 .dg > span { display: block; will-change: transform; }
.tm6 .dg > span > span { display: block; height: 1em; }
.tm7 .f { display: block; background: linear-gradient(90deg, var(--on) 50%, rgba(238,240,255,.42) 50%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
.tm7 .e { display: block; color: rgba(238,240,255,.42); }
.tm8 { width: 100%; }
.tm8 .rule { height: 1px; background: var(--ri); transform-origin: 0 50%; transform: scaleX(0); margin-bottom: 14px; }
.tm8 .row { display: grid; grid-template-columns: 40px auto minmax(0, 1fr); gap: 12px; font: 500 12px/1.3 var(--rf); letter-spacing: .04em; text-transform: uppercase; }
.tm8 .row .num { color: #2f45ff; }
.tm8 .row .as { justify-self: end; text-align: right; color: var(--rmute); }
.tm8 .row span span { display: inline-block; opacity: 0; transform: translateY(.35em); white-space: pre; }

@media (max-width: 760px) { .rm-tm { grid-template-columns: minmax(0, 1fr); } .tm8 .row { grid-template-columns: 30px auto; } .tm8 .row .as { grid-column: 1 / -1; justify-self: start; text-align: left; } }

/* this page only: the screenshots are UI, so they show whole instead of zooming for parallax */
.cs-on .cs-shot img, .cs-on .cs-shot.in img { transform: none; }