/* Agencies & Developers (teams.html): who are you, then the video or the numbers, then the logins. */
.tm-step{display:none}
main[data-step=who] .tm-who,main[data-step=what] .tm-what,main[data-step=numbers] .tm-numbers{display:block;animation:tm-rise .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes tm-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){main[data-step] .tm-step{animation:none}}

/* the first two steps fill the screen, so the footer stays below */
.tm-who,.tm-what{min-height:calc(100vh - 78px);min-height:calc(100svh - 78px)}
.tm-numbers h1{font-size:clamp(38px,4.8vw,66px)}
.tm-numbers .seat-hero{align-items:start}
@media (max-width:860px){.tm-numbers .seat-hero>form{order:-1}}   /* they asked for the numbers: on a phone they come first */

/* what's only for one of the two */
main:not([data-who=agency]) [data-for=agency],main:not([data-who=developer]) [data-for=developer]{display:none!important}

.picks.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px}
@media (max-width:860px){.picks.two{grid-template-columns:1fr}}
a.pick{text-decoration:none}
/* just the words and the arrow */
.picks.two .pick{flex-direction:row;align-items:center;justify-content:space-between;gap:18px;padding:clamp(26px,3vw,38px) clamp(24px,3vw,34px)}
.picks.two .pick .pk-go{position:static;margin:0;flex:none}
#tmWatch .pk-go svg{fill:currentColor;stroke:none}
.pick .pk-go.arrow svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.tm-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;padding:8px 14px 8px 10px;border-radius:40px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font:600 14.5px var(--sans);color:var(--ink);text-decoration:none}
.tm-back:hover{background:var(--sand)}
.tm-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tm-what .tm-back{display:flex;width:max-content}
.tm-what .kick{display:flex;margin-bottom:4px}
.tm-what h1{max-width:780px}
html[dir=rtl] .tm-back svg{transform:scaleX(-1)}

.tm-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:clamp(20px,3vw,34px)}
.tm-top .tm-back{margin-bottom:0}
.tm-switch{display:inline-flex;gap:2px;padding:4px;border-radius:40px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.tm-switch a{padding:6px 16px;border-radius:40px;font:600 14.5px var(--sans);color:var(--ink);text-decoration:none}
.tm-switch a[aria-current]{background:var(--ink);color:#fff}

.tm-watch{display:inline-flex;align-items:center;gap:10px;padding:4px 16px 4px 4px;border:0;border-radius:40px;background:transparent;box-shadow:inset 0 0 0 2px var(--ink);font:700 14.5px var(--sans);color:var(--ink);cursor:pointer}
.tm-watch i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--coral)}
.tm-watch svg{width:16px;height:16px;fill:var(--ink)}
.tm-watch:hover{background:rgba(11,15,28,.06)}